在前端开发中，我们经常需要动态地改变网页元素的文本内容。其中，Span 元素通常用于包裹小段文本，在某些情况下需要动态更改其文本内容。那么，如何在 JavaScript 中改变 Span 元素的文本内容呢？
通过 innerHTML 属性
Span 元素的文本内容通常被包含在 <span> 和 </span> 标签之间。我们可以使用该元素的 innerHTML 属性来修改其文本内容。以下是代码示例：
-- -- ---- -- ----- ----------- - ---------------------------------- -- -- ---- ------- --------------------- - ---------
需要注意的是，使用 innerHTML 属性会将指定元素的所有内容替换为新的文本内容。如果该元素包含其他嵌套元素或事件处理程序等内容，这些内容也会被一并替换掉。因此，在使用 innerHTML 属性时，需要注意不要影响其他内容。
通过 textContent 或 innerText 属性
另外，我们还可以使用 Span 元素的 textContent 或 innerText 属性来修改其文本内容。这两个属性都可以获取或设置指定元素的文本内容。以下是代码示例：
-- -- ---- -- ----- ----------- - ---------------------------------- -- -- ---- ------- ----------------------- - --------- -- -- --------------------- - ---------
需要注意的是，textContent 和 innerText 属性在某些情况下可能会有微小的区别。具体而言，textContent 会获取或设置元素中所有文本节点的文本内容，而 innerText 则会尝试计算并返回只包含可见文本的节点文本内容。
总结
改变 Span 元素的文本内容，可以使用其 innerHTML、textContent 或 innerText 属性。其中，innerHTML 可以替换掉指定元素的所有内容，而 textContent 和 innerText 只能修改元素的文本内容。在使用这些属性时，需要注意不要影响其他嵌套元素或事件处理程序等内容。
希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30423