ThatManK Mobile Article

innerText和innerHTML的区别

Category: JS Tutorial: DOM操作 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

innerText 和 innerHTML 的区别

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <div></div>
    <div></div>

    <p>
      我是文字
      <span>123</span>
    </p>

    <script>
      // innerText 和 innerHTML的区别

      // 1. innerText 不识别html标签 非标准  去除空格和换行
      var div = document.querySelectorAll("div");
      div[0].innerText = "<strong>今天是：</strong> 2019";

      // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
      div[1].innerHTML = "<strong>今天是：</strong> 2019";

      // 这两个属性是可读写的  可以获取元素里面的内容
      var p = document.querySelector("p");
      console.log(p.innerText);
      console.log(p.innerHTML);
    </script>
  </body>
</html>