JavaScript | 更改 span 元素的文本

在开发 Web 应用程序时，我们经常需要动态更改 HTML 元素的文本内容。对于 span 元素，我们可以使用 JavaScript 来更改其文本。

下面是更改 span 元素文本的示例代码：

// 定义 span 元素
var mySpan = document.getElementById("mySpan");

// 更改其文本内容
mySpan.textContent = "新的文本内容";

在这个示例中，我们首先使用 document.getElementById() 方法找到具有指定 ID 的 span 元素。然后，使用 textContent 属性更改其文本内容。

textContent 属性是 HTML5 中引入的，用于设置或返回节点及其后代的文本内容。与 innerText 属性不同，textContent 属性可以获取和设置元素中的空格和换行符。

如果要更改多个 span 元素的文本内容，可以使用以下代码：

// 定义所有 span 元素
var mySpans = document.getElementsByTagName("span");

// 循环遍历每个 span 元素并更改其文本内容
for (var i = 0; i < mySpans.length; i++) {
  mySpans[i].textContent = "新的文本内容";
}

在这个示例中，我们首先使用 document.getElementsByTagName() 方法找到所有的 span 元素，并将它们存储在 mySpans 变量中。然后，使用 for 循环遍历每个 span 元素并更改其文本内容。

使用 JavaScript 更改元素的文本内容可以在实现动态效果以及交互性方面提供很大的帮助。只需记住，使用 textContent 属性可以更改元素中的文本内容。