innerhtml和innertext是JavaScript元素對象中的兩個(gè)屬性，都可設(shè)置或獲取document對象文本內(nèi)容，但兩者之間還是有一些差異的。下面本篇文章就來帶大家了解一下innerhtml和innertext屬性，簡單對比一下innerhtml和innertext，看看兩者間的區(qū)別是什么。

首先我們來簡單了解一下innerHTML和innerText屬性；然后通過代碼示例來直觀的感受innerHTML和innerText屬性的區(qū)別?！就扑]學(xué)習(xí)：javascript高級教程】

• innerHTML屬性：可以設(shè)置或獲取標(biāo)簽起始位置到終止位置的全部內(nèi)容

• innerText屬性：可以設(shè)置或獲取標(biāo)簽起始位置到終止位置的全部文本信息

通過文字描述，是不是有點(diǎn)繞，我們來看一張圖

通過上圖，我們是不是知道了點(diǎn)innerhtml和innertext屬性差異，下面我們通過代碼示例來具體看看innerhtml和innertext屬性的區(qū)別：

首先我們有這樣的HTML框架

<div id="test"> 	<span style="color:red">test1</span> test2 </div> <input type="button" onclick="getContent()" value="獲取div元素的內(nèi)容"/>

我們使用innerHTML 屬性來獲取div標(biāo)簽中的內(nèi)容

<script type="text/javascript"> 	function getContent(){ 		var div=document.getElementById("test"); 		console.log(div.innerHTML); 	} </script>

點(diǎn)擊按鈕，控制臺的輸出結(jié)果：

我們使用innerText屬性來獲取div標(biāo)簽中的內(nèi)容

<script type="text/javascript"> 	function getContent(){ 		var div=document.getElementById("test"); 		console.log(div.innerText); 	} </script>

點(diǎn)擊按鈕，控制臺的輸出結(jié)果：

總結(jié)：innerHTML和innerText屬性的區(qū)別

innerText屬性可以輸出標(biāo)簽間的純文本信息，會將標(biāo)簽過濾掉。

innerHTML屬性可以輸出標(biāo)簽間的全部內(nèi)容，包括里面的HTML標(biāo)簽和文本信息。

特別說明：

innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器，應(yīng)少用innerText。

如果必須輸出不含HTML標(biāo)簽的內(nèi)容，可以先利用innerHTML取得包含HTML標(biāo)簽的內(nèi)容，然后用正則表達(dá)式過濾HTML標(biāo)簽。