js中innertext的用法

原创

ithorizon 8个月前 (09-01) 阅读数 115 #Javascript

JS中innerText的用法

引言

在JavaScript中，innerText是一个非常有用的属性，它可以用来获取或设置某个元素中的文本内容。在很多情况下，我们都需要使用innerText来操作网页中的文本信息。本文将详细介绍怎样在HTML中使用JavaScript的innerText属性。

获取元素文本内容

要获取某个元素的文本内容，可以使用innerText属性。以下是一个单纯的示例：


<html>
  <body>
    <p id="myP">这是一个段落</p>
    <script>
      var myPText = document.getElementById("myP").innerText;
      console.log(myPText); // 输出：这是一个段落
    </script>
  </body>
</html>

设置元素文本内容

同样地，我们可以使用innerText属性来设置元素的文本内容。以下是一个示例：


<html>
  <body>
    <p id="myP">这是一个段落</p>
    <script>
      document.getElementById("myP").innerText = "段落内容已更新";
      console.log(document.getElementById("myP").innerText); // 输出：段落内容已更新
    </script>
  </body>
</html>

innerText与innerHTML的区别

在JavaScript中，除了innerText，还有一个与它非常相似的属性：innerHTML。这两个属性的首要区别在于，innerText仅获取或设置元素的文本内容，而innerHTML可以获取或设置元素的HTML内容。以下是两者的对比示例：


<html>
  <body>
    <p id="myP"><strong>粗体文本</strong>和一个普通文本</p>
    <script>
      console.log(document.getElementById("myP").innerText); // 输出：粗体文本和一个普通文本
      console.log(document.getElementById("myP").innerHTML); // 输出：<strong>粗体文本</strong>和一个普通文本
    </script>
  </body>
</html>