使用 JavaScript 更改标签文本

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 更改标签文本

作者：迹忆客最近更新：2024/03/23 浏览次数：

本教程介绍如何使用 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');
}