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

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

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

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

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

通過(guò)上圖，我們是不是知道了點(diǎn)innerhtml和innertext屬性差異，下面我們通過(guò)代碼示例來(lái)具體看看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 屬性來(lái)獲取div標(biāo)簽中的內(nèi)容

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

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

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

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

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

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

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

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

特別說(shuō)明：

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

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