今天看了很多文章关于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. Linux shell ftp命令下载文件 根据文件日期

    需求:ftp获取远程数据的文件,根据文件的创建时间点下载文件. 可以自行扩展根据文件的大小等其他需求. 知识点总结: 1.获取文件的时间: ls -lrt|awk '{print $6" & ...

  2. Luogu1514 NOIP2010 引水入城 BFS、贪心

    传送门 NOIP的题目都难以写精简题意 考虑最上面一排的某一个点对最下面一排的影响是什么样的,不难发现必须要是一段连续区间才能够符合题意. 如果不是一段连续区间,意味着中间某一段没有被覆盖的部分比周围 ...

  3. 重写Override ToString()方法

    使用一个小例子来演示: 创建一个普通类别: class Ax { private int _ID; public int ID { get { return _ID; } set { _ID = va ...

  4. 实现Repeater控件的记录单选(二)

    前一篇<实现Repeater控件的记录单选>http://www.cnblogs.com/insus/p/7426334.html 虽然可以实现对Repeater控件的记录进行单选,但是, ...

  5. H+ 后台主题UI框架

    十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今天得到了一个非常完美的后端管理系统框架:H+ 后台主题UI框架 H+ 后台主题UI框架 H+是一个完全响应式,基于Bootstrap3.3.6最新 ...

  6. 【强化学习】python 实现 q-learning 迷宫通用模板

    本文作者:hhh5460 本文地址:https://www.cnblogs.com/hhh5460/p/10145797.html 0.说明 这里提供了二维迷宫问题的一个比较通用的模板,拿到后需要修改 ...

  7. Spring boot多模块（moudle）中的一个注入错误（Unable to start embedded container; nested exception is org）

    org.springframework.context.ApplicationContextException: Unable to start embedded container; nested ...

  8. 过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

    难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回 ...

  9. CentOS 6下gcc升级的操作记录(由默认的4.4.7升级到6.4.0版本）

    机房一台centos6.9机器部署了jenkins发布系统,开发人员在用node编译js,发现依赖的gcc版本低了,故需要将gcc升级到高版本(至少5.0版本以上),这里选择升级到6.4.0版本,下面 ...

  10. 第七次Scrum meeting

    第七次Scrum  meeting 任务及完成度: 成员 12.26 12.27 陈谋 任务1040:完成stackoverflow的数据处理后的json处理(98%) 任务1114-1:完成对网页数 ...