如何更改span元素的JavaScript中

Question

文本如果我有一个跨度，说：

<span id="myspan"> hereismytext </span> 

如何使用JavaScript来改变“hereismytext”到“newtext”？

Answer 1

document.getElementById("myspan").innerHTML="newtext"; 

编辑 对于现代的浏览器：

document.getElementById("myspan").textContent="newtext"; 

Answer 2

document.getElementById('myspan').innerHTML = 'newtext'; 

Answer 3

使用的innerHTML是SO不推荐。 相反，你应该创建一个textNode。这样，您就“绑定”了文本，而且至少在这种情况下，您不容易受到XSS攻击。

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!! 

正确方法：

span = document.getElementById("myspan"); 
txt = document.createTextNode("your cool text"); 
span.appendChild(txt); 

有关此漏洞的更多信息： Cross Site Scripting (XSS) - OWASP

编辑2017年11月4日：

修改根据@mumush建议的代码第三行： “使用appendChild（）;改为”。
顺便说一句，根据@Jimbo Jonny我认为一切应该被视为用户输入应用安全层的原则。这样你就不会遇到任何意外。

Answer 4

如果您是一个供给文本和无文本的一部分是由用户提供（或不要控制一些其他源），那么设置innerHTML是细：

// * Fine for hardcoded text strings like this one or strings you otherwise 
// control. 
// * Not OK for user-supplied input or strings you don't control unless 
// you know what you are doing and have sanitized the string first. 
document.getElementById('myspan').innerHTML = 'newtext'; 

然而，正如其他人所指出的，如果您不是文本字符串的任何部分的来源，使用innerHTML可能会使您受到类似XSS的内容注入攻击，前提是您不小心要先正确处理文本。

如果您正在使用来自用户的输入，这里是做安全的同时也保持跨浏览器兼容的一种方式：

var span = document.getElementById('myspan'); 
span.innerText = span.textContent = 'newtext'; 

Firefox不支持innerText和IE8不支持textContent所以如果要保持跨浏览器兼容性，则需要同时使用两者。

如果你想避免回流（由innerText引起）在可能的情况：

var span = document.getElementById('myspan'); 
if ('textContent' in span) { 
    span.textContent = 'newtext'; 
} else { 
    span.innerText = 'newtext'; 
} 

Answer 5

这里的另一种方式：

var myspan = document.getElementById('myspan'); 

if (myspan.innerText) { 
    myspan.innerText = "newtext"; 
} 
else 
if (myspan.textContent) { 
     myspan.textContent = "newtext"; 
} 

innerText属性将通过Safari浏览器，谷歌Chrome和MSIE进行检测。对于Firefox，标准的做法是使用textContent，但从版本45开始，它也有一个innerText属性，正如最近有人亲切地告诉我的。此解决方案测试以查看浏览器是否支持这些属性，如果是，则分配“newtext”。

现场演示：here

Answer 6

我用Jquery并没有以上的帮助，我不知道为什么，但这个工作：

$("#span_id").text("new_value"); 

Answer 7

像其他的答案，innerHTML的和的innerText不建议使用，最好使用textContent。此属性是很好的支持，您可以检查此： http://caniuse.com/#search=textContent

Answer 8

对于这个跨度

<span id="name">sdfsdf</span> 

可以是这样的： -

$("name").firstChild.nodeValue = "Hello" + "World";