开发者社区> 长征2号> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

innerHTML与innerText的异同

简介:
+关注继续查看

在一道面试题中看到的。

1、功能讲解: 
innerHTML 设置或获取位于对象起始和结束标签内的 HTML 
outerHTML 设置或获取对象及其内容的 HTML 形式 
innerText 设置或获取位于对象起始和结束标签内的文本 
outerText 设置(包括标签)或获取(不包括标签)对象的文本 
2、示例 

复制代码
 1 <html> 
 2 <head> 
 3 <title>Demo</title> 
 4 <style><!-- 
 5 body {font-family:"宋体";color="blue";font-size="9pt"} 
 6 --> </style> 
 7 <script language="JavaScript"> 
 8 //.innerHTML 
 9 function innerHTMLDemo() 
10 { 
11 test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>"; 
12 } 
13 //.innerText 
14 function innerTextDemo() 
15 { 
16 test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>"; 
17 } 
18 //.outerHTML 
19 function outerHTMLDemo() 
20 { 
21 test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>"; 
22 } 
23 //.outerText 
24 function outerTextDemo() 
25 { 
26 test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>"; 
27 } 
28 </script> 
29 </head> 
30 <body> 
31 <ul> 
32 <li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li> 
33 <li id="test_id2" onclick="innerTextDemo()">innerText效果.</li> 
34 <li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li> 
35 <li id="test_id4" onclick="outerTextDemo()">outerText效果.</li> 
36 </ul> 
37 </body> 
38 </html> 
复制代码

 


3、不同之处: 
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于: 
1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。 
2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。 

特别说明: 
  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例: 
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>


本文转自ChokCoco博客园博客,原文链接:http://www.cnblogs.com/coco1s/p/3637866.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
springboot的ApplicationRunner和CommandLineRunner
springboot的ApplicationRunner和CommandLineRunner
21 0
《C游记》 第柒章 - 指针进阶内功锻 功成行满见真如(叁)
《C游记》 第柒章 - 指针进阶内功锻 功成行满见真如(叁)
15 0
关于 AutoCompleteTextView 不输入文字就显示下拉
由于项目要做一个带有下拉提示的输入框,第一时间就想到了AutoCompleteTextView。但是需求和控件还是有一点出入,公司的需求为:点击输入框即可显示提示数据的数据。
1285 0
关于 AutoCompleteTextView 不输入文字就显示下拉
由于项目要做一个带有下拉提示的输入框,第一时间就想到了AutoCompleteTextView。但是需求和控件还是有一点出入,公司的需求为:点击输入框即可显示提示数据的数据。
862 0
如何绑定和修改常用邮箱?
如果您注册阿里云账号时,没有绑定常用邮箱,请绑定常用邮箱,以便您及时收取包括产品开通、到期、故障、安全、关停等重要通知。 绑定常用邮箱 登录进入邮箱绑定页面。
3081 0
SpringBoot之CommandLineRunner接口和ApplicationRunner接口
我们在开发中可能会有这样的情景。需要在容器启动的时候执行一些内容。比如读取配置文件,数据库连接之类的。SpringBoot给我们提供了两个接口来帮助我们实现这种需求。这两个接口分别为CommandLineRunner和ApplicationRunner。他们的执行时机为容器启动完成的时候。 这两个接口中有一个run方法,我们只需要实现这个方法即可。这两个接口的不同之处在于:Applica
1945 0
+关注
1703
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载