innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

最新推荐文章于 2024-07-25 10:54:59 发布
最新推荐文章于 2024-07-25 10:54:59 发布
阅读量984 收藏 4
点赞数
分类专栏： php

  今天看了很多文章关于innerHTML、outerHTML、innerText、outerText的区别，都是很模糊的一个介绍，所以自己总结下这些区别以及一些重点内容。很多文章在描述这些区别的时候，都是只针对一点进行描述，所以很难完全理解这些的字面含义以及区别点。


一、区别描述如下：（书上形式的说法）

  • innerHTML设置或获取位于对象起始和结束标签内的 HTML
  • outerHTML设置或获取对象及其内容的 HTML 形式
  • innerText  设置或获取位于对象起始和结束标签内的文本
  • outerText  设置(包括标签)或获取(不包括标签)对象的文本
单单看这些文字很难弄懂什么标签啊获取啊，所以需要代码来实践证明，比较通俗易懂。

注意看描述：一个是设置，一个是获取。所谓设置就是我有一个标签，里面有文本内容或是没文本内容，我要去实现“替换”内容出现的所谓区别；所谓获取，就是同样一个个标签，里面有文本内容或是没文本内容我怎么去获取到它的内容出现的差异区别，所以在做代码实践时，要注意从这两个方面下手去做区别才能很好的全面了解差异性。

二、从”获取“对象内容上区别
[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset= 'utf-8'>  
  5.     <title>HTML5自由者</title>  
  6. </head>  
  7. <body>  
  8.     <div id="test1">这是div中的文字<span>这是span中的文字</span></div>  
  9.   
  10.     <script type="text/javascript">  
  11.         console.log('innerHTML:'+test1.innerHTML);  
  12.         console.log('outerHTML:'+test1.outerHTML);  
  13.         console.log('innerText:'+test1.innerText);  
  14.         console.log('outerText:'+test1.outerText);  
  15.     </script>  
  16. </body>  
  17. </html>  

我们先来看下console控制台显示的运行结果：


innerHTML:这是div中的文字<span>这是span中的文字</span>
outerHTML:<div id="test1">这是div中的文字<span>这是span中的文字</span></div>
innerText:这是div中的文字这是span中的文字
outerText:这是div中的文字这是span中的文字

可以得出结论：
 ① innerHTML 获取对象起始和结束标签内的 HTML，即这里的对象是div标签，亦即这个标签里面所有的内容包含span标签也获取出来，即 “这是div中的文字<span>这是span中的文字</span>”（注意HTMl这个字的意思，也就是结构）
 ② outerHTML 是在①innerHTML基础上获取它的outer对象标签内容，也就是“<div id="test1">这是div中的文字<span>这是span中的文字</span></div>” 这些里面有什么内容及标签结构都获取出来。 （注意HTMl这个字的意思，也就是结构）

 ②  innerText和outerText在获取时是相同效果 都是获取<div> </div>标签里的文本内容，去除掉了<div> ,<span>标签，只显示div,span标签里的文本内容，即 “这是div中的文字这是span中的文字”（注意Text这个字的意思，也就是文本）

我先来看一张结构图，方便记忆下：




三、从”设置“对象内容上区别
先看代码：
[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.  <meta charset= 'utf-8'>  
  5.  <title>HTML5自由者——innerHTML、outerHTML和innerText、outerHTML的区别</title>  
  6.  <script language="JavaScript" type="text/javascript">   
  7. 　　//.innerHTML  
  8. 　　function innerHTMLDemo()  
  9. 　　{   
  10. 　　　test_id1.innerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";   
  11. 　　}   
  12. 　　//.innerText  
  13. 　　function innerTextDemo()  
  14. 　　{   
  15. 　　　test_id2.innerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";   
  16. 　　}   
  17. 　　//.outerHTML  
  18. 　　function outerHTMLDemo()  
  19. 　　{   
  20. 　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";   
  21. 　　}  
  22. 　　//.outerText  
  23. 　　function outerTextDemo()  
  24. 　　{   
  25. 　　　test_id4.outerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";   
  26. 　　}  
  27. 　</script>   
  28. </head>   
  29. <body>   
  30. 　<ul>   
  31. 　  <li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>   
  32. 　  <li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>   
  33. 　　<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>   
  34. 　　<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>   
  35. 　</ul>   
  36. </body>   
  37. </html>  

运行结果：鼠标点击li列表显示不同的样式，我们来一起一 个一个点击看看会发生什么现在，


①innerHTML点击后显示结果：

可以看出，在设置标签的时候，innerHTML直接把标签结构设置到HTML文档中，显示出样式出来，


[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>  


再来看看通过谷歌浏览器调试工具我们来看看【innerHTML】结构是怎样的？



也就是说，innerHTMl在设置对象文本内容的时候，有插入标签，是直接把字体大小，颜色 斜体 下划线这些样式显现出来。


② outerHTML点击后显示结果：（跟innerHTMl效果一样。）是直接把字体大小，颜色 斜体 下划线这些样式显现出来。

③  innerText 跟outerText 显示结果是直接把" "里的内容包括标签原封不动的设置显示出来（如下图）

    

总结： inner操作的是tag内部的对象, outer 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.


四、兼容性区别


注意: W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)


innerHTML & outerHTML：获取/设置的内容是包含标签的
两者已经被HTML5纳入规范。
innerText & outerText：获取/设置的内容是文本内容

innerHTML在获取的时候：
IE和Opera会将获取到的标签全部转换为大写形式。而苹果、谷歌、火狐会将内容按照原来的格式返回HTML，包括空格和缩进。（这也就意味着返回后的不同内容的DOM树结构截然不同）

outerHTML：新建的DOM子树会替代掉“调用元素”
IE4+、Safari4+、Chrome、Opera8+支持，FF7-不支持

脚本限制：
使用innerHTML插入<script>的时候，不会执行相应代码，但是在IE8以及之前版本浏览器中，能够执行，但需要满足一些执行条件： 
1、必须指定defer属性；
2、必须位于有作用域的元素之后（如一个div、一个文本节点等）
使用innerHTML插入<style>的时候，正常浏览器能够执行样式，但是IE8以及之前浏览器中，不能够执行，因为IE8认为<style>是没有作用域的元素。
如下元素不支持innerHTML：<col><colgroup><frameset><head><html><style><table><tbody><thead><tfoot><tr>
在IE8以及之前的浏览器中，<title>也不支持innerHTML


innerText：IE4+、Safari3+、Chrome、Opera8+支持；FF不支持，但是有textContent属性（DOM Level3规定的属性，支持程度：IE9+、Safari3+、Chrome、Opera10+）
outerText：获取和innerHTML无区别，但是设置有区别（不只替换调用元素的子节点，还会替换整个元素）
支持程度：IE4+、Safari3+、Chrome、Opera8+
poclist
关注
专栏目录
innerText，textContent，innerHTML兼容问题和return区别
Chad97的博客
08-22 844
一、兼容问题 *innerText，textContent，innerHTML*这三个方法都是用于网页中插入数据，比较常用的还是innerHTML因为他比较兼容也比较符合标准；但是他们之间在本质上还是有一定的区别，在低版本浏览器上会出现兼容问题，textContent是火狐定义的ie8不支持，innerText是ie定义的低版本火狐不支持下面我来做一些示例： 先定义一个按钮和一个div： &...
html innerHTML outerHTML innerText outerText等的区别及实例汇总
09-29
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
innerHTML作用和用法
最新发布
爱敲代码的卡拉米的博客
07-25 674
也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；方法用于解析和清理（sanitize）HTML 字符串，然后将其作为元素的子树插入到 DOM 中。innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；这样就能向id为abc的对象插入内容。
innerText 和outerText 的区别
溺水的鱼 - Later equals never.
09-26 2002
 A test for innerText, outerText methodfunction getInnerText(objectID){    var divTextObject=document.getElementById(objectID);    if(!divTextObject){        alert("innerText(): The "+objectID+" not f
js中innerHTML与innerText的用法与区别
李涛的技术专栏
04-28 2142
用法：   test1 test2在JS中可以使用：test.innerHTML:　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 　　上例中的test.innerHTML的值也就是“test1 test2 ”。test.innerText: 　　从起始位置到终止位置的内容, 但它去除Html标签 　　上例中的text.innerTest的值也就是“test1
JavaScript之innerHTML和outerHTML，innerText和outerText
Karka_的博客
09-15 5174
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
在跨浏览器兼容性上，应优先使用innerHTML和innerText。 总结来说，这四个属性都是用于操纵HTML元素内容的重要工具，选择哪个取决于具体需求，是需要处理HTML结构还是纯文本内容，以及是否涉及元素本身。在进行DOM...
innerHTML、innerText、textContent兼容性
weixin_30784945的博客
09-19 119
html： <p id="area">this is a <span style="color: red;">html</span>!</p> 一、innerHTML console.log(document.getElementById("area").innerHTML); 结果： this is...
JS兼容性问题---innerHTML
baichong3681的博客
10-23 160
题目: 获取指定内容的节点 方案: element.innerHTML == str; 不兼容浏览器: IE 7及以下 原因: IE 7以下不将空白作为一个节点, 当节点后面有换行或者空白的时候获取到的innerHTML会多一个空格 解决方案: element.innerHTML == str || element.innerHTML == st...
innerHTML、innerText和outerHTML、outerText的区别
于大大大洋
08-06 603
1、区别描述如下：  innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText和outerText在获取时是相同效果，但在设置时，inn
outerText和innerText的区别。
无尽的代码--------mandolin`s coding life
06-11 2875
    对于DOM对象的这两个属性，初学者往往会感到疑惑，因为通过它们所获得的值没有任何区别。　    实际上，只要理解了它们各自的含义，就不难辨别了。    某元素的innerText指的是由其元素的开始标签和结束标签所包含的那一段HTML代码被去除格式后的纯文本。       outerText与其不同的是它包含元素的开始和结束标签。　    在取值的时候两者没有任何区别，但在赋值的时候就很容
innerText、outerText与innerHTML、outerHTML
weixin_56505845的博客
04-27 567
innerText、outerText与innerHTML、outerHTML 1、取值 innerText和outerText取值都是对象起始和结束标签内部的文本内容，而innerHTML取值是对象起始和结束标签内部的html，不包括对象本身的起始标签和结束标签，outerHTML取值是也是html，但是包括对象本身的起始标签和结束标签，具体如下： <div id="out">这是div文本 <span>这是span文本</span> </div> l
innerHTML,outerHTML, innerText,outerText 的区别
anji7380的博客
10-30 116
-innerHTML 设置或获取位于对象起始和结束标签内的 HTML - outerHTML 设置或获取对象及其内容的 HTML 形式 - innerText 设置或获取位于对象起始和结束标签内的文本 - outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，...
innerHTML、outerHTML、innerText、outerText的区别
JAVA天地
07-08 131
程序代码 &lt;div id="div"&gt;&lt;input name="button" value="Button" type="button"&gt;&lt;font color="green"&gt;&lt;h2&gt;This is a DIV!&lt;/h2&gt;&lt;/font&gt;
Chrome 浏览器对 innerHTML 处理的兼容性的问题
天下无双
02-16 6101
<br />var table = document.getElementById(tableId); // 获取table var tbody = table.getElementsByTagName("tbody")[0]; // 获取table的body元素 var cell = tbody.rows[0].cells[0] if(checkboxName == undefined){ if(getOs() == 'IE'){ checkboxName = cell.fi
解决 innerHTML的浏览器兼容问题
奚学长的工地
09-30 5193
document.getElementById(id).innerHTML=trHtml; 上述代码在IE6-9中无效（IE10正常），直接报错： 　　IE9：Invalid target element for this operation. 　　IE6-8：Unknown runtime error 发现是在IE6-IE9下，下列元素table,
HTML属性详解：innerHTML、outerHTML、innerText与outerText的区别
"了解JavaScript中的innerHTML、outerHTML、innerText和outerText属性的用法及它们之间的差异对于前端开发至关重要。这些属性允许我们操作DOM元素的内容和结构。以下是对这些属性的详细解释： 1. innerHTML: - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值