JavaScript 如何改变标签的文本

在学习改变HTML文档中标签元素的文本的方法之前，让我们先了解一下什么是标签本身？

标签有助于提高网页对鼠标用户的可用性，因为如果用户点击它，它可以切换里面的文字。

现在让我们来讨论一下使用JavaScript改变标签元素文本的方法。

JavaScript允许我们使用两个内置的属性来改变HTML文档中任何元素的文本，如下所示

使用innerHTML属性。
使用 innerText属性。

使用innerHTML属性

innerHTML属性允许我们用一些HTML来改变或分配新的文本，也就是说，你可以在提供新的文本时使用HTML标签，并根据重要性使用不同的HTML元素来管理新的文本。

语法

以下语法用于使用JavaScript的innerHTML属性来改变或分配新的文本到标签元素中。

selected_label_element.innerHTML = " new Text ";

让我们来理解innerHTML属性的实际实现，用JavaScript代码例子来改变标签元素的文本。

算法

第1步，我们将在HTML文档中添加一个带有ID的标签元素，以便在JavaScript中抓取它，然后用innerHTML属性改变它的文本。
第2步– 在下一步中，我们将在文档中添加一个输入元素，以获得用户的输入文本，并用该文本替换标签元素的文本。
第 3步– 在这一步中，我们将添加一个按钮元素，该元素有一个与之相关的onclick事件，它以一个函数为值，当用户点击按钮时调用它。
第4步 -- 在第4步中，我们将定义一个JavaScript自定义函数，在其中使用innerHTML属性来改变标签的文本，如上面的语法所示。
第 5步– 在最后一步，我们将把上一步定义的函数分配给与按钮标签相关的onclick事件，这样它就可以在以后点击按钮时调用它。

例子

下面的例子将解释如何实际使用innerHTML属性，用JavaScript改变标签元素的文本。

<html>
<body>
   <h2>Changing the text of a label using JavaScript</h2>
   <p id = "upper"> The text of the below label element will be replaced by the text you enter in input bar once you click the button. </p>
   <label id = "labelText"> This is the initial text inside the label element. </label> <br>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeText()"> Click to change the Text </button>
   <script>
      var label = document.getElementById("labelText");
      function changeText() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         label.innerHTML = " <b> " + enteredText + ", </b> is the new text of the label element that replaces the previous text, which is entered by you. </b> ";
      }
   </script>
</body>
</html>

在上面的例子中，首先我们用文档中给它的ID抓取了标签元素，然后使用innerHTML属性用一个新的文本来改变文本，这个文本也包含了HTML标签。

使用innerText属性

innerText属性也被用来改变HTML文档中任何HTML元素的文本，正如innerHTML属性所做的那样。它几乎与innerHTML属性相似，唯一的区别是它不允许使用里面有文本的HTML元素。如果你试图在文本中使用HTML元素，它将把它们视为新文本的一部分，并在用户屏幕上显示。

语法

下面的语法将告诉你如何使用innerText属性来改变标签元素的文本。

selected_label_element.innerText = " new Text ";

让我们在JavaScript代码例子的帮助下详细了解它，它是在实际中实现的。

算法

前面的例子和这个例子的算法几乎相似。你只需要做一些小的改动，将上例中的innerHTML属性替换为innerText属性来改变文本。

例子

下面的例子将说明在JavaScript中如何使用innerText属性来改变标签元素的文本。

<html>
<body>
   <h2>Changing the text of a label using JavaScript</h2>
   <p id = "upper">The text of the below label element will be replaced by the text you enter in input bar once you click the button.</p>
   <label id = "labelText">This is the initial text inside the label element.</label> <br>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeText()">Click to change the Text</button>
   <script>
      var label = document.getElementById("labelText");
      function changeText() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         label.innerText = enteredText + ", is the new text of the label element that replaces the previous text, which is entered by you. ";
      }
   </script>
</body>
</html>

在这个例子中，我们使用了innerText属性，就像我们使用innerHTML属性来改变标签元素的文本一样，使用了JavaScript。

在这篇文章中，我们已经了解了改变HTML文档中标签元素文本的两种不同方法，以及它们在代码实例中的实际实现。在前一种方法中，我们用innerHTML属性来改变文本，它允许使用HTML元素来作为双引号内的文本。而在后一个例子中，我们使用了innerText属性，它不允许这样做。