JS: 如何动态地将文本插入到SPAN中？

Question

如何在不使用任何JavaScript框架的情况下动态更改SPAN元素中的文本。

我知道如何在DIV中执行此操作，代码如下：

document.getElementById('myDiv').innerHTML = '...'

对于元素，相应的等价代码是什么？

- user186068

Answer 1

getElementById() 函数的作用与其名字一样：获取一个id属性等于传入参数的元素；因此，如果你有一个名为“mySpan”的span元素，你的代码应该是这样的：

document.getElementById('mySpan').innerHTML = '...'

- Rubens Farias

Answer 2

innerHTML虽然可以工作，但如果您不知道自己在做什么，则可能会在某些情况下存在危险。它可以插入HTML标签而不仅仅是文本，这可能会导致XSS攻击等安全问题。

一些人提出的具有innerText回退的textContent是一个更好的选择，因为您无需担心脚本注入等问题。

如果您不必支持IE8及更早版本，则使用没有回退的textContent。 IE9及更高版本支持textContent。

- Trott

---

这应该更高，因为它是针对一般问题的高度详细的答案，而不是特定于OP的用例。 - krillgar

有点令人困惑。提供一个小例子会更清楚明白。 - clearlight

Answer 3

这种特定的技术适用于任何元素，但在像div这样的元素上使用它的注意事项是它将替换内部元素而不仅仅是文本。

如果您只想替换文本，可以通过以下方式实现：

function replaceText( el, str ) {
    el.textContent ? el.textContent = str : el.innerText = str;
}

replaceText( spanReference, 'blah' )

- meder omuraliev

Answer 4

你也可以使用innerHTML来操作span元素。

你尝试过这样做会发生什么？

你可以查看一个简短的例子： http://bytes.com/topic/javascript/answers/149023-there-faster-way-change-span-innerhtml

- James Black