JS之innerHTML，innerText，outerHTML，textContent的用法與區別

示例html代碼：

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