DOM innerHTML 和 innerText 使用与区别

innerHTML 和 innerText是什么？

​ innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML;其实两者之间的区别 innerHTML是从对象的起始位置到终止位置的全部内容,包括Html标签；

​ 而 innerText从起始位置到终止位置的内容, 但它去除Html标签。

• 取值

  • innerText只会取到文本内容

  • innerHTML取到内部所有内容（包括标签）

    <div id="p1"><p id="p2">hello world </p></div>
    var dom = document.getElementById("p1");
    console.log(dom.innerHTML); // <p id="p1">hello world </p> 
    console.log(dom.innerText); // hello world 
    

• 赋值

  • 相同点：都会替换原本（完整）的内容，重新赋值

  • 不同点：

    • innerText赋值时，如果有标签，会把标签当纯文本（字符串）
    • innerHTML赋值时，如果有标签，解析成html元素

  • 如果不涉及到标签，两个都一样，都是完整替换

      var dom = document.getElementById("p1");
          dom.innerText = `<p id="p2">hehe </p>` // <div id="p1"><p id="p2">hehe </p></div> div里面p是字符串
          dom.innerHTML = `<p id="p2">hehe </p>` //  <div id="p1"><p id="p2">hehe </p></div> div里面p是标签