如何使用JavaScript更改标签的文本

在学习如何在HTML文档中更改标签元素的文本之前，让我们先了解什么是标签标记本身？

标签标签有助于提高网页对鼠标用户的可用性，因为如果用户单击它，它可以切换其中的文本。

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

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

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

使用innerHTML属性

innerHTML属性允许我们更改或分配新的文本，并使用一些HTML来定义新的文本，即您可以在提供新文本时使用HTML标记，并使用不同的HTML元素来管理新文本的重要性。

语法

以下语法用于使用JavaScript的innerHTML属性更改或分配新文本给标签元素：

selected_label_element.innerHTML = " new Text ";

让我们通过JavaScript代码示例来理解如何实际使用innerHTML属性来更改标签元素的文本 –

步骤

步骤1 - 在步骤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抓取了label元素，然后使用innerHTML属性将文本更改为新文本，其中也包含了HTML标签。

使用innerText属性

innerText属性与innerHTML属性一样，也用于更改HTML文档中任何HTML元素的文本。它与innerHTML属性几乎相同，唯一的区别是它不允许在文本中使用HTML元素。如果您尝试在文本中使用HTML元素，它将把它们视为新文本的一部分，并将其原样显示在用户屏幕上。

语法

以下语法将向您展示如何使用innerText属性更改label元素的文本 –

selected_label_element.innerText = " new Text ";

让我们借助JavaScript代码示例详细了解它，该示例实际上实现了它。

算法

之前的示例和这个示例的算法几乎相似。您只需要通过使用innerText属性替换上面示例中的innerHTML属性来进行一些小的更改，以更改文本。

示例

下面的示例将演示使用innerText属性来更改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.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属性，该属性不允许这样做。