使用 JavaScript 更改标签文本
本教程介绍如何使用 JavaScript 更改标签文本。我们将使用 .innerHTML 和 jQuery 的 text() 方法来实现本教程的目标。
那么，让我们开始吧！
JavaScript 中的 <label> 是什么
标签 (<label>) 是一个 HTML 标签，我们可以使用它来定义元素的标题或 <input> 元素的文本标签。你可以在此处找到标签 (<label>) 标记的不同用途。
使用 .innerHTML 使用 JavaScript 更改标签文本
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>
Change the Text of A label in JavaScript
</title>
</head>
<body>
<label id = "label">
Change this text by clicking on the button
</label>
<br>
<button onclick="changeLabelText()">
Click Here
</button>
</body>
</html>
JavaScript 代码：
function changeLabelText() {
document.getElementById('label').innerHTML =
'The text of this label has been changed';
}
输出（在按下按钮点击这里之前）：
输出（按下按钮点击这里后）：
在这里，我们使用 .innerHTML 属性并指定在单击 Click Here 按钮后显示的新文本。 .innerHTML 返回 HTML 元素内的字符串和驻留在字符串内的 HTML/XML 标记，例如空格和换行符等。
我们使用这个属性来查看HTML元素中的内容 - 包括任何换行、空格、格式不规则等等。如果文本中包含字符 >、< 或 &，.innerHTML 属性将返回HTML实体。
我们可以稍微修改一下 JavaScript 代码，并在按下按钮 Click Here 后在旧文本和新文本之间切换。更新后的 JavaScript 代码如下：
function changeLabelText() {
var element = document.getElementById('label');
if (element.innerHTML == 'Change this text by clicking on the button')
element.innerHTML = 'The text of this label has been changed';
else
element.innerHTML = 'Change this text by clicking on the button';
}
输出：
使用 jQuery 的 .text() 方法使用 JavaScript 更改标签文本
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>
Change the Text of A label in JavaScript
</title>
</head>
<body>
<label id = "label">
Change this text by clicking on the button
</label>
<br>
<button onclick="changeLabelText()">
Click Here
</button>
</body>
</html>
JavaScript 代码：
function changeLabelText() {
var label_text = $('#label').text();
if (label_text === 'Change this text by clicking on the button')
$('#label').text('The text of this label has been changed');
else
$('#label').text('Change this text by clicking on the button');
}
输出：
在这里，我们使用 jQuery 的 text() 方法获取文本并将其保存到 label_text 变量中。此外，我们检查 label_text 的值和类型，并使用 === 运算符将其与 Change this text by click on the button 进行比较。
如果是 true，则将新文本传递给 text() 方法；否则，它不是。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
