Question

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

我知道如何使用DIV执行此操作，它将如下所示：

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

对于SPAN元素，这相当于什么？

Answer 1

getElementById（）完全按照名称暗示：获取id属性等于参数的元素;所以，如果你有一个名为“mySpan”的范围，你的代码应该是：

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

Answer 2

innerHTML会起作用，但如果您不知道自己在做什么，在某些情况下会很危险。它可以插入HTML标签，而不仅仅是文本，可能会让您受到XSS攻击等。

textContent带有innerText后备，有些人建议这是一个更好的主意，因为您不必担心脚本注入等。

如果您不必支持IE8及更早版本，请使用textContent，不要回退。 IE9及更高版本支持textContent。

Answer 3

该特定技术适用于任何元素，但在div等元素上使用它时需要注意的是它将替换内部元素而不仅仅是文本。

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

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

replaceText( spanReference, 'blah' )

Answer 4

您也可以将spanHTML用于span元素。

当你试图这样做时发生了什么？