📌  相关文章
📜  如何使用 JavaScript 更改标签的文本？(1)

📅  最后修改于: 2023-12-03 14:51:55.523000             🧑  作者: Mango

如何使用 JavaScript 更改标签的文本？

要更改HTML标签的文本，可以使用JavaScript中的操作DOM（文档对象模型）的方法。以下是一些常见的方法：

1. 使用innerHTML属性

innerHTML属性可用于在HTML元素中设置或获取文本内容。

示例代码：

document.getElementById("myElement").innerHTML = "新文本";

上述代码将把ID为“myElement”的元素中的文本更改为“新文本”。

2. 使用textContent或innerText属性

textContent和innerText属性也可用于设置或获取标签中的文本内容。

示例代码：

document.getElementById("myElement").textContent = "新文本";

或是：

document.getElementById("myElement").innerText = "新文本";

上述代码将把ID为“myElement”的元素中的文本更改为“新文本”。

区别：

  • textContent可以获取和设置元素中的任何文本内容，包括隐藏元素中的文本。
  • innerText只返回可见文本内容，会忽略隐藏元素的文本。
3. 使用createTextNode和appendChild方法

使用createTextNode方法可以创建包含文本内容的新节点。使用appendChild方法可以将该节点添加到指定元素的子元素列表中。

示例代码：

var newNode = document.createTextNode("新文本");
document.getElementById("myElement").appendChild(newNode);

上述代码将在ID为“myElement”的元素的末尾添加一个包含“新文本”的文本节点。

以上就是使用JavaScript更改标签文本的几种常见方法。

注意：

  • 更改HTML标签的文本内容可能会影响页面上的布局，因此要谨慎使用。
  • 如果要更改多个元素的文本内容，最好使用循环来处理。

参考资料：