今天看了很多文章关于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. git log 的常用选项

  2. [您有新的未分配科技点][BZOJ3545&BZOJ3551]克鲁斯卡尔重构树

    这次我们来搞一个很新奇的知识点:克鲁斯卡尔重构树.它也是一种图,是克鲁斯卡尔算法求最小生成树的升级版首先看下面一个问题:BZOJ3545 Peaks. 在Bytemountains有N座山峰,每座山峰 ...

  3. VitualBox安装linux记录

    下载镜像 CentOS 7镜像下载 阿里云站点:http://mirrors.aliyun.com/centos/7/isos/x86_64/ VirtualBox安装linux https://ww ...

  4. 渐进式 JavaScript 框架--Vue

      前  言   灵活 不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高效 20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化 1 计算属性 计算属性关键词: comp ...

  5. HTML-JS 数组 内置对象

    [JS中的数组] 1.数组的基本概念? 数组是在内存空间中连续存储的一组有序数据的集合 元素在数组中的顺序,称为下标.可以使用下标访问数组的每个元素 2.如何声明一个数组 ① 使用字面量声明:var ...

  6. 关于树莓派HDMI转VGA线接显示器黑屏

    经过数种折腾,找到了解决方法,在SD卡内有个config.txt文件,在其中找到“#hdmi_safe=1”,把#消除掉,变更后成为 # uncomment if you get no picture ...

  7. 《Linux内核设计与实现》第4章读书整理

    第四章   进程调度 4.1多任务 无论在单处理器或者多处理机器上,多任务操作系统都能使多个进程处于堵塞或者睡眠状态. 非抢占式多任务:除非进程自己主动停止运行,否则它会一直执行. 抢占式多任务:进程 ...

  8. Python学习笔记 -- 第六章 文件操作

    I/O编程 在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘,所以,读写文件就是请求操作系统打开一个文件对象(通常称为文件描述符),然后,通过操作系统提供的接口从这 ...

  9. EnglishGame

    https://github.com/zhangxue520/EnglishGame/blob/master/EnglishGame <程序设计实践I> 题目:       打字训练测试软 ...

  10. 北京大学信息科学技术学院本科生课程体系课程大纲选登——计算机网络与WEB技术