Js—innerHTML和innerText的區別

1.innerHTML屬性和innerText屬性

　　都是對元素的一個操作，簡單講，innerHTML可以在某種特定環境下重構某個元素節點的DOM結構，innerText只能修改文本值

 

　　在JavaScript高級程序設計(第三版)是這樣描述的： 

　　　　在只讀模式下，innerHTML返回與調用元素的所有子節點(包括元素、注釋和文本節點）對應的HTML標記。

　　　　

<div>
　　這是一個div標簽
　　<div>這里又是一個div標簽</div>
</div>

var div = document.getElementsTagName("div")[0];

console.log(div.innerHTML);   // 這是一個div標簽<div>這里又是一個div標簽</div>

console.log(div.innerText);　　
//這是一個div標簽
//這里又是一個div標簽

　　　　結果顯而易見，innerHTML會返回一個帶標簽的值，innerText只會返回文本值，如果有換行，也會返回換行。

 

　　　　在寫入模式下，innerHTML會根據指定的值創建新的DOM樹，替換掉調用元素的所有子節點。

<div>
　　這是一個div標簽
　　<div>這里又是一個div標簽</div>
</div>


var div = document.getElmentsByTagName('div')[0];

div.innerHTML = "<a href="#">我是一個鏈接</a>";
div.innerText= "<a href="#">我是一個鏈接</a>";
//設置innerHTML后div結構變成
<div><a href="#">我是一個鏈接</a></div>

//設置innerText后div結構變成
<div><a href="#">我是一個鏈接</a></div>
這是的a只是純文本，在頁面上只是文字，並沒有渲染成a元素

　　

　　技巧分享： 當需要添加的innerHTML為DOM結構另一個元素的文本內容時，可以使用下面的操作

 

this.innerHTML = documen.body.innerHTML.replace(/<.+?>/gim,'');

//去掉標簽