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

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

  • innerHTML设置或获取位于对象起始和结束标签内的 HTML
  • outerHTML设置或获取对象及其内容的 HTML 形式
  • innerText  设置或获取位于对象起始和结束标签内的文本
  • outerText  设置(包括标签)或获取(不包括标签)对象的文本
单单看这些文字很难弄懂什么标签啊获取啊，所以需要代码来实践证明，比较通俗易懂。
 
注意看描述：一个是设置，一个是获取。所谓设置就是我有一个标签，里面有文本内容或是没文本内容，我要去实现“替换”内容出现的所谓区别；所谓获取，就是同样一个个标签，里面有文本内容或是没文本内容我怎么去获取到它的内容出现的差异区别，所以在做代码实践时，要注意从这两个方面下手去做区别才能很好的全面了解差异性。
 
二、从”获取“对象内容上区别
  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. <script type="text/javascript">
  10. console.log('innerHTML:'+test1.innerHTML);
  11. console.log('outerHTML:'+test1.outerHTML);
  12. console.log('innerText:'+test1.innerText);
  13. console.log('outerText:'+test1.outerText);
  14. </script>
  15. </body>
  16. </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这个字的意思，也就是文本）
 
我先来看一张结构图，方便记忆下：
 

 
 
三、从”设置“对象内容上区别
 
先看代码：
  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文档中，显示出样式出来，
 
  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-不支持thd178.com 444814.cn
 
脚本限制：

使用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+

innerHTML、outerHTML、innerText、outerText的区别及兼容性问题的更多相关文章

  1. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  2. innerHTML/outerHTML; innerText/outerText; textContent

    innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/A ...

  3. (转)innerHTML、innerText和outerHTML、outerText的区别

    原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/ ...

  4. 测试开发技术：DOM中 innerHTML、innerText、outerHTML、outerText的区别

    测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别   我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...

  5. innerHTML、innerText和outerHTML、outerText的区别

    区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...

  6. innerHTML outerHTML innerText

      迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...

  7. innerHTML、innerText、outerHTML、outerText的区别

    我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...

  8. outerHTML、innerHTML以及innerText三者的区别

  9. value，innerHTML，innerText之间的区别

    value:是DOM对象的属性.主要用于获取单标签的属性,(针对单标签): innerHEML:用于获取闭合双标签里面的内容,(可以识别标签): innerText:用于获取闭合单标签里面的内容,(不 ...

随机推荐

  1. C#析构函数 （转载）

    一.C#析构函数 1. 析构函数的定义与注意的问题析构函数用于释放被占用的系统资源.析构函数的名字由符号“-”加类名组成.使用析构函数时,应该注意下面的问题: 只能在类中使用析构函数,不能在结构中使用 ...

  2. Flask核心机制--上下文源码剖析

    一.前言 了解过flask的python开发者想必都知道flask中核心机制莫过于上下文管理,当然学习flask如果不了解其中的处理流程,可能在很多问题上不能得到解决,当然我在写本篇文章之前也看到了很 ...

  3. 【转】分布式一致性算法：Raft 算法（Raft 论文翻译）

    编者按:这篇文章来自简书的一个位博主Jeffbond,读了好几遍,翻译的质量比较高,原文链接:分布式一致性算法:Raft 算法(Raft 论文翻译),版权一切归原译者. 同时,第6部分的集群成员变更读 ...

  4. Nowcoder 牛客练习赛23

    Preface 终于知道YKH他们为什么那么喜欢打牛客网了原来可以抽衣服 那天晚上有空就也去玩了下,刷了一波水TM的YKH就抽到了,我当然是没有了 题目偏水,好像都是1A的.才打了一个半小时,回家就直 ...

  5. Python：线程之定位与销毁

    背景 开工前我就觉得有什么不太对劲,感觉要背锅.这可不,上班第三天就捅锅了. 我们有个了不起的后台程序,可以动态加载模块,并以线程方式运行,通过这种形式实现插件的功能.而模块更新时候,后台程序自身不会 ...

  6. [转载]sql 盲注之正则表达式攻击

    [转载]sql 盲注之正则表达式攻击 -----------------------------------------MYSQL 5+-------------------------------- ...

  7. sqli-labs less 1-4

    sqli-labs less 1-4 数字型注入 当输入的参数为整形时,如果存在注入漏洞,可以认为是数字型注入. 测试步骤: (1) 加单引号,URL:www.text.com/text.php?id ...

  8. windows平台下编辑的内容传到linux平台出现中文乱码的解决办法

    现象说明:在windows下编辑的内容,上传到linux平台下出现中文乱码.如下: 在windows平台编写haha.txt文件,内容如下: 上传到linux平台,出现中文乱码,如下: 基本上面出现的 ...

  9. Adobe Photoshop CC 2015使用及扩展工具

    VAdobe Photoshop CC 2015: 简称"PS",是由Adobe Systems开发和发行的图像处理软件 扩展工具: Cuuterman:切图插件: 一个一个切图, ...

  10. 移动app rem

    (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...