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

Question

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

我知道如何用a做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' )