javascript中的innerHTML，innerText，outerHTML的用法及其區別

示例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>

相容性

innerHTML所有瀏覽器相容；innerText與outerHTML雖然主流瀏覽器，如谷歌，火狐，IE7-IE11，QQ等都已支持（這裡提到的谷歌火狐等都是最新瀏覽器的版本），但是W3C的標準屬性就是innerHTML,因此，儘可能地去使用innerHTML，而少用innerText與outerHTML。