数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 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 - 在第四步中，我们将定义一个 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>
在这个示例中，我们以与使用 innerHTML 属性更改标签元素文本相同的方式使用了 innerText 属性。
在这篇文章中，我们学习了两种不同的方法来更改 HTML 文档中标签元素的文本，并在代码示例中进行了实际实现。在前面一种方法中，我们使用 innerHTML 属性更改文本，该属性允许使用 HTML 元素作为双引号内的文本。而在后面一种方法中，我们使用了 innerText 属性，它不允许这样做。
5K+ 次查看
