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,'');

//去掉标签