改变 Span 元素的文本内容？

在前端开发中，我们经常需要动态地改变网页元素的文本内容。其中，Span 元素通常用于包裹小段文本，在某些情况下需要动态更改其文本内容。那么，如何在 JavaScript 中改变 Span 元素的文本内容呢？

通过 innerHTML 属性

Span 元素的文本内容通常被包含在 <span> 和 </span> 标签之间。我们可以使用该元素的 innerHTML 属性来修改其文本内容。以下是代码示例：

// 获取 Span 元素
const spanElement = document.getElementById("mySpan");

// 修改 Span 元素的文本内容
spanElement.innerHTML = "新的文本内容";

需要注意的是，使用 innerHTML 属性会将指定元素的所有内容替换为新的文本内容。如果该元素包含其他嵌套元素或事件处理程序等内容，这些内容也会被一并替换掉。因此，在使用 innerHTML 属性时，需要注意不要影响其他内容。

通过 textContent 或 innerText 属性

另外，我们还可以使用 Span 元素的 textContent 或 innerText 属性来修改其文本内容。这两个属性都可以获取或设置指定元素的文本内容。以下是代码示例：

// 获取 Span 元素
const spanElement = document.getElementById("mySpan");

// 修改 Span 元素的文本内容
spanElement.textContent = "新的文本内容";
// 或者
spanElement.innerText = "新的文本内容";

需要注意的是，textContent 和 innerText 属性在某些情况下可能会有微小的区别。具体而言，textContent 会获取或设置元素中所有文本节点的文本内容，而 innerText 则会尝试计算并返回只包含可见文本的节点文本内容。

总结

改变 Span 元素的文本内容，可以使用其 innerHTML、textContent 或 innerText 属性。其中，innerHTML 可以替换掉指定元素的所有内容，而 textContent 和 innerText 只能修改元素的文本内容。在使用这些属性时，需要注意不要影响其他嵌套元素或事件处理程序等内容。

希望本文对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30423