Js—innerHTML和innerText的区别

时间:2022-06-06 14:24:42

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

//去掉标签