
在了解如何更改 HTML 文档中 label 元素的文本的方法之前,让我们先了解一下 label 标签本身是什么?
标签有助于提高鼠标用户的网页可用性,因为如果用户单击它,它可以切换其中的文本。
现在让我们讨论一下使用 JavaScript 更改标签元素文本的方法。
JavaScript 允许我们使用两个内置属性来更改 HTML 文档中任何元素的文本,如下所示 -
立即学习“Java免费学习笔记(深入)”;
使用innerHTML 属性。
使用innerText属性。
使用innerHTML属性
innerHTML 属性允许我们使用一些 HTML 来更改或分配新文本,即您可以在向其提供新文本的同时使用 HTML 标签,并根据使用不同 HTML 元素定义它的重要性来管理新文本。
语法
以下语法用于使用 JavaScript 的innerHTML 属性更改或分配新文本到标签元素 -
selected_label_element.innerHTML = " new Text ";
让我们了解使用 JavaScript 代码示例更改 label 元素文本的 innerHTML 属性的实际实现 -
算法
第 1 步 - 在第一步中,我们将向 HTML 文档添加一个带有 ID 的标签元素,以便在 JavaScript 中抓取它,并稍后使用innerHTML 属性更改它的文本.
步骤 2 - 在下一步中,我们将向文档添加一个输入元素,以从用户获取输入文本,并用该文本替换标签元素的文本。 p>
第 3 步 - 在此步骤中,我们将添加一个带有与其关联的 onclick 事件的按钮元素,该元素将函数作为值,并在用户单击按钮时调用它。
第 4 步 - 在第四步中,我们将定义一个 JavaScript 自定义函数,在其中使用 innerHTML 属性来更改标签标记的文本,如上面的语法所示。
第 5 步 - 在最后一步中,我们将在最后一步中定义的函数分配给与按钮标签关联定义的 onclick 事件,以便稍后可以调用它单击按钮。
示例
下面的示例将解释如何实际使用innerHTML属性来使用JavaScript更改标签元素的文本 -
Changing the text of a label using JavaScript
The text of the below label element will be replaced by the text you enter in input bar once you click the button.
在上面的示例中,首先我们使用文档中为其指定的 ID 获取标签元素,然后使用 innerHTML 属性将文本更改为新文本,该新文本也包含 HTML 标签。
使用innerText属性
与innerHTML 属性一样,innerText 属性还用于更改HTML 文档中存在的任何HTML 元素的文本。它与innerHTML 属性几乎相似,唯一的区别是它不允许使用其中包含文本的HTML 元素。如果您尝试将 HTML 元素与文本一起使用,它会将它们视为新文本的一部分,并按原样将其显示在用户屏幕上。
语法
以下语法将向您展示如何使用innerText属性来更改标签元素的文本 -
selected_label_element.innerText = " new Text ";
让我们借助 JavaScript 代码示例来详细了解它,并在其中实际实现。
算法
上一个例子和这个例子的算法几乎相似。您只需执行一些小的更改,将上面示例中的innerHTML 属性替换为innerText 属性即可更改文本。
示例
下面的示例将说明如何使用innerText属性来更改JavaScript中标签元素的文本 -
Changing the text of a label using JavaScript
The text of the below label element will be replaced by the text you enter in input bar once you click the button.
在此示例中,我们使用innerText 属性的方式与使用innerHTML 属性相同的方式使用JavaScript 来更改标签元素的文本。
在本文中,我们了解了更改 HTML 文档中标签元素文本的两种不同方法及其在代码示例中的实际实现。在前一个中,我们使用innerHTML 属性更改文本,该属性允许使用HTML 元素在双引号内提供文本。然而,在后一个中,我们使用了innerText属性,但它不允许这样做。











