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

最新推荐文章于 2023-09-15 14:00:00 发布
最新推荐文章于 2023-09-15 14:00:00 发布
阅读量1.6w 收藏 17
点赞数 3
分类专栏： HTMl5 JavaScript HTML5自由者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html5_/article/details/23619103
版权
HTML5自由者 同时被 3 个专栏收录
94 篇文章 13 订阅
订阅专栏
HTMl5
81 篇文章 0 订阅
订阅专栏
JavaScript
23 篇文章 0 订阅
订阅专栏

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


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

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

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

二、从”获取“对象内容上区别 
<!DOCTYPE html>
<html>
<head>
	<meta charset= 'utf-8'>
	<title>HTML5自由者</title>
</head>
<body>
	<div id="test1">这是div中的文字<span>这是span中的文字</span></div>

	<script type="text/javascript">
	 	console.log('innerHTML:'+test1.innerHTML);
	 	console.log('outerHTML:'+test1.outerHTML);
	 	console.log('innerText:'+test1.innerText);
	 	console.log('outerText:'+test1.outerText);
	</script>
</body>
</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这个字的意思，也就是文本）

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




三、从”设置“对象内容上区别
先看代码： 
<!DOCTYPE html>
<html>
<head>
 <meta charset= 'utf-8'>
 <title>HTML5自由者——innerHTML、outerHTML和innerText、outerHTML的区别</title>
 <script language="JavaScript" type="text/javascript"> 
　　//.innerHTML
　　function innerHTMLDemo()
　　{ 
　　　test_id1.innerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　} 
　　//.innerText
　　function innerTextDemo()
　　{ 
　　　test_id2.innerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　} 
　　//.outerHTML
　　function outerHTMLDemo()
　　{ 
　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　}
　　//.outerText
　　function outerTextDemo()
　　{ 
　　　test_id4.outerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　}
　</script> 
</head> 
<body> 
　<ul> 
　  <li id="test_id1" οnclick="innerHTMLDemo()">innerHTML效果.</li> 
　  <li id="test_id2" οnclick="innerTextDemo()">innerText效果.</li> 
　　<li id="test_id3" οnclick="outerHTMLDemo()">outerHTML效果.</li> 
　　<li id="test_id4" οnclick="outerTextDemo()">outerText效果.</li> 
　</ul> 
</body> 
</html>

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


①innerHTML点击后显示结果：

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


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






一喵呜
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你不知道的outerText,innerText 区别说明
12-29
首先，看我们的html定义     <div id=diva>     <div id=div1>      <a>innerHTML,innerText,outerHTML,outeterText</a>      <input type =button  onclick =inner() value=inner  />      <input type =button onclick =outer() value=outer />     </div>       </div>   js源码如下:     function inner()     {   
innerHTML、innerText、outerHTML、outerText区别
菜鸟程序员成长路
10-24 6451
1、区别： （1） innerHTML 设置或获取位于对象起始和结束标签内的 HTML，例子： &lt;div id="div1"&gt;hello world&lt;/div&gt; &lt;div id="div2"&gt; &lt;span&gt;BEI&lt;/span&gt; &lt;p&gt;JING&lt;/p&gt; &lt;/
JavaScript之innerHTML和outerHTML，innerText和outerText
最新发布
Karka_的博客
09-15 1792
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
innerText、outerText与innerHTML、outerHTML
weixin_56505845的博客
04-27 516
innerText、outerText与innerHTML、outerHTML 1、取值 innerText和outerText取值都是对象起始和结束标签内部的文本内容，而innerHTML取值是对象起始和结束标签内部的html，不包括对象本身的起始标签和结束标签，outerHTML取值是也是html，但是包括对象本身的起始标签和结束标签，具体如下： <div id="out">这是div文本 <span>这是span文本</span> </div> l
HTML框架标签frameset、frame、iframe、noframes
weixin_33736832的博客
03-20 237
一个浏览器文档窗口中一般只能显示一个网页文件，但是，使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件。框架是由英文Frame翻译过来，它代表浏览器文档窗口中的一个子窗口。每个框架都可以显示一个HTML文件，多个框架组成了一个框架集（Frameset）。框架集通常的使用方法是在一个框架中放置一个网页，此网页含有可以链接到其他多个网...
前端学习day13-DOM：获取元素的内容，元素的属性，点击事件，添加元素
qq_45926448的博客
06-30 1562
.获取标签的内容，获取元素自带的属性，获取元素自定义属性，点击事件 ,添加元素
html innerHTML outerHTML innerText outerText等的区别及实例汇总
09-29
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
html div单击事件,给div绑定点击事件三个方法
热门推荐
weixin_42393452的博客
06-05 1万+
基础代码测试div {font-size: 2em;width: 250px;cursor: pointer /*变成手型*/}.clickme {background-color: #2aabd2;}方法1-javascript代码绑定事件绑定-点击我document.getElementById("clickme").onclick = function () {location.href =...
DOM事件机制
冰霜的博客
09-11 328
事件机制 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码： <div id='div1'>我是一个div</div> <button id='btn'>点我啊</button> <!-- 还可以在HTML标签中进行事件的绑定 需要加()--> <.
outerText和innerText的区别。
无尽的代码--------mandolin`s coding life
06-11 2803
    对于DOM对象的这两个属性，初学者往往会感到疑惑，因为通过它们所获得的值没有任何区别。　    实际上，只要理解了它们各自的含义，就不难辨别了。    某元素的innerText指的是由其元素的开始标签和结束标签所包含的那一段HTML代码被去除格式后的纯文本。       outerText与其不同的是它包含元素的开始和结束标签。　    在取值的时候两者没有任何区别，但在赋值的时候就很容
innerHTML innerText的使用和区别
*乘号的笔记本
01-16 279
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的；   1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身) 2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身） 3） innerText设置或...
innerText 和outerText 的区别
溺水的鱼 - Later equals never.
09-26 1980
 A test for innerText, outerText methodfunction getInnerText(objectID){    var divTextObject=document.getElementById(objectID);    if(!divTextObject){        alert("innerText(): The "+objectID+" not f
js的innerHTML及jquery的html() 在ie下不兼容“未知运行时错误” 的解决方案
wxyoo1 的技术人生
10-12 2665
今天在给学生处做一个需求页面写一个计时插件时，遇到了html()在ie下兼容性问题 先看代码： html 必读说明 $(document).ready(function(){ var count = 3; var countdown = setInterval(CountDown, 1000); function CountDown() { //al
innerText、outerText、innerHTML、outerHTML的区别与使用
骆驼草的家园
11-01 155
innerText、outerText、innerHTML、outerHTML的区别与使用   1、区别描述 innerHTML 设置或获取位于对象起始和结束标签内的 HTMLouterHTML 设置或获取对象及其内容的 HTML 形式innerText 设置或获取位于对象起始和结束标签内的文本outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText和oute...
innerHTML、innerText、textContent兼容性
weixin_30784945的博客
09-19 111
html： <p id="area">this is a <span style="color: red;">html</span>!</p> 一、innerHTML console.log(document.getElementById("area").innerHTML); 结果： this is...
innerhtml与innertext的区别
06-28
### 回答1： innerHTML和innerText都是JavaScript中常用的属性，用于获取或设置HTML元素的内容。它们的区别在于： 1. innerHTML获取或设置的是元素的HTML内容，包括标签和文本内容，而innerText只获取或设置元素的文本内容，不包括标签。 2. innerHTML可以用于修改元素的HTML结构，包括添加、删除、替换元素和属性等操作，而innerText只能修改元素的文本内容。 3. innerHTML会触发浏览器的重绘和重排，因为它会改变元素的结构和样式，而innerText只会改变元素的文本内容，不会影响元素的结构和样式。 因此，在使用innerHTML和innerText时，需要根据具体的需求选择合适的属性。如果需要修改元素的HTML结构，应该使用innerHTML；如果只需要修改元素的文本内容，应该使用innerText。 ### 回答2： innerHTML和innerText是JavaScript中常用的两个属性，都用于操作HTML元素的文本内容。但是两者有着不同的区别。 首先，innerHTML是元素的一个属性，它返回元素的HTML内容，包括HTML标签、文本和属性。它可以修改元素的HTML内容，允许插入新的HTML元素或者改变元素的样式和属性。 例如，我们可以使用innerHTML将一个段落的文本内容替换成一个新的段落标签，这个新的标签可以拥有不同的颜色、字体和文本内容。 而innerText是元素的另一个属性，返回元素的纯文本内容，没有包含任何HTML标签。与innerHTML不同，innerText不能修改HTML结构，因此它通常用于操作那些只包含文本内容的元素。 此外，innerHTML的返回结果可能会包含一些浏览器自动在HTML中添加的节点（例如空格或换行符），这些节点在innerText中是不会被包含的。 在使用innerHTML或innerText时还需要注意安全问题。由于innerHTML可以插入任意的HTML代码，因此会存在一定的安全风险，可能会受到XSS攻击。而innerText没有这个问题，因为它只能处理纯文本内容。 综上所述，innerHTML和innerText有着不同的用途和特点。我们应该根据需要选择合适的方法来操作HTML元素的文本内容，同时注意相关的安全问题。 ### 回答3： innerHTML和innerText是两个常用的Web开发术语。它们都用于处理HTML元素的内容属性，但是它们有几个不同之处。 innerHTML是一个属性，它表示某个元素的HTML内容。这个属性可以被读、写和修改，允许我们在网页中动态地更新和改变HTML内容。这样的话，我们就可以通过编程来更新网页中的内容，而无需修改HTML文件本身。innerHTML可以引用其他元素或属性，例如文本，图像，链接，样式和脚本。innerHTML属性非常强大，它可以轻松地创建动态的HTML内容，大大简化了Web开发的工作流程。 然而，innerText是表示元素的所有文本内容，但不包括HTML标签。如果一个元素包含嵌套的标签，例如链接、段落或表格，则innerText只返回纯文本，不返回标签。跟innerHTML不同的是，innerText只能被读取，因此不能用于更改HTML内容。它通常用于获取网页中的文本内容而不包括HTML标记。 在实际应用中，如果需要动态更新网页的内容，则应使用innerHTML，它可以轻松地修改网页的结构和布局。然而，如果只需要获取网页中的文本内容，而不需要HTML标记，则应使用innerText，因为它只返回纯文本内容，不包含标签和样式。 总之，innerHTML和innerText是两个常用的Web开发术语，它们都用于处理HTML元素的内容属性。但是需要注意的是，它们之间有一些不同之处，具体使用要根据实际情况确定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值