欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

innerHTML、innerText、outerHTML、textContent的区别

程序员文章站 2022-06-24 22:51:10
示例html代码: 示例html代码: 示例html代码: 示例html代码: 示例html代码:
test1 test2
获得id为test的DOM对象,下面就不一一获取了。 var tes ......
<div id="test">
   <span style="color:red">test1</span> test2
</div>

获得id为test的dom对象,下面就不一一获取了。

var test = document.getelementbyid('test');

test.innerhtml

描述:也就是从对象的起始位置到终止位置的全部内容,包括html标签。

上例中的test.innerhtml的值也就是“<span style="color:red">test1</span> test2 ”

test.innertext

描述:从起始位置到终止位置的内容, 但它去除html标签 。

上例中的test.innertext的值也就是test1 test2, 其中span标签去除了。

test.outerhtml

描述:除了包含innerhtml的全部内容外, 还包含对象标签本身。

上例中的test.outerhtml的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

完整示例:

<div id="test">
   <span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerhtml)">innerhtml内容</a>
<a href="javascript:alert(test.innertext)">inertext内容</a>
<a href="javascript:alert(test.outerhtml)">outerhtml内容</a>

结果:

//test.innerhtml结果:<span style="color:red">test1</span> test2
//test.innertext结果:test1 test2
//test.outerhtml结果:<div id="test"><span style="color:red">test1</span> test2</div>

test.textcontent

描述:textcontent 属性设置或返回指定节点的文本内容,以及它的所有后代。

提示:有时,此属性可用于取代 nodevalue 属性,但是请记住此属性同时会返回所有子节点的文本。

得到的结果跟innertext的结果是一样的。

注释:internet explorer 8 以及更早的版本不支持此属性。

兼容性

innerhtml所有浏览器兼容;innertextouterhtml虽然主流浏览器,如谷歌,火狐,ie7-ie11,qq等都已支持(这里提到的谷歌火狐等都是最新浏览器的版本),但是w3c的标准属性就是innerhtml,因此,尽可能地去使用innerhtml,而少用innertextouterhtml