使用 JavaScript 更改标签文本
Mehvish Ashiq
2023年1月30日
2022年5月1日
-
JavaScript 中的
<label>是什么 -
使用
.innerHTML使用 JavaScript 更改标签文本 -
使用 jQuery 的
.text()方法使用 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() 方法；否则，它不是。
Author: Mehvish Ashiq
