今天看了很多文章关于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. .NET的弹性及瞬间错误处理库Polly

    原文:.NET的弹性及瞬间错误处理库Polly 本文基本是官方说明的翻译和总结(https://github.com/App-vNext/Polly) 什么是Polly? Polly是一款基于.NET ...

  2. Linux 开启端口命令

    编者按 今天在配置Zookeeper集群的时候,碰到下面的问题: 这里说明是主机192.168.116.129:3888没有连通. 首先ping了一把,是通的,说明主机之间是连通的,然后再检查开放的端 ...

  3. CentOS 7.2:Failed to start IPv4 firewall with iptables

    问题 系统是centos7.2,且已经安装了iptables服务,但是在执行启动命令后,却报了iptables服务无法正常启动的错误. 启动命令如下: systemctl start iptables ...

  4. Iptables防火墙规则使用梳理

    iptables是组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,它可以代替昂贵的商业防火墙解决方案,完成封包过滤.封包重定向和网络地址转换(NAT)等功能 ...

  5. Mysql优化系列（1）--Innodb重要参数优化

    1.简单介绍InnoDB给MySQL提供了具有提交,回滚和崩溃恢复能力的事务安全(ACID兼容)存储引擎.InnoDB锁定在行级并且也在SELECT语句提供一个Oracle风格一致的非锁定读.这些特色 ...

  6. tomcat相关配置技巧梳理 (修改站点目录、多项目部署、限制ip访问、大文件上传超时等)

    tomcat常用架构:1)nginx+tomcat:即前端放一台nginx,然后通过nginx反向代理到tomcat端口(可参考:分享一例测试环境下nginx+tomcat的视频业务部署记录)2)to ...

  7. CentOS 网卡自动启动、配置等ifcfg-eth0教程

    装完centos后发现网卡没有自动启动, vi /etc/sysconfig/network-scripts/ifcfg-eth0 将ONBOOT=no 改为yes即可 原文链接: http://yp ...

  8. linux及安全第五周总结

    给MenuOS增加time和time-asm命令 中间过程已省略了,我们所做的只是将menu更新 具体命令如下 rm menu -rf 强制删除 git clone http://github.com ...

  9. linux内核分析第六周学习笔记

    LINUX内核分析第六周学习总结 标签(空格分隔): 20135328陈都 陈都 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.c ...

  10. 趟坑：使用pip安装TensorFlow

    这几天在安装TensorFlow,看了很多教程,方法也试了几种. 最后还是用pip安装成功的,过程如下. 1.安装ubuntu后在  系统设置-软件与更新-附加驱动 里,更新N卡驱动. (N卡官网下载 ...