innerHTML、innerText、outerHTML、textContent的区别

<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所有浏览器兼容；innertext与outerhtml虽然主流浏览器，如谷歌，火狐，ie7-ie11，qq等都已支持（这里提到的谷歌火狐等都是最新浏览器的版本），但是w3c的标准属性就是innerhtml,因此，尽可能地去使用innerhtml，而少用innertext与outerhtml