如果我有一个span，请说：
<span id="myspan"> hereismytext </span>
如何使用 JavaScript 将“hereismytext”更改为“newtext”？
如何使用 JavaScript 更改 span 元素的文本？
IT技术
javascript
html
2021-01-11 00:20:01
6个回答
对于现代浏览器，您应该使用：
document.getElementById("myspan").textContent="newtext";
虽然较旧的浏览器可能不知道textContent，但不建议使用，innerHTML因为当新文本是用户输入时，它会引入 XSS 漏洞（有关更详细的讨论，请参阅下面的其他答案）：
//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";
使用的innerHTML是SO不推荐。相反，您应该创建一个 textNode。这样，您就“绑定”了您的文本，并且至少在这种情况下，您不会受到 XSS 攻击。
document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!
正确的方式：
span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);
有关此漏洞的更多信息： 跨站点脚本 (XSS) - OWASP
2017 年 11 月 4 日编辑：
根据@mumush 的建议修改了第三行代码：“使用 appendChild(); 代替”。
顺便说一句，根据@Jimbo Jonny，我认为通过应用分层安全原则，一切都应该被视为用户输入。这样你就不会遇到任何意外。
编辑：这是在 2014 年写的。你可能不再关心 IE8，可以忘记使用innerText. 只需使用textContent并完成它，万岁。
如果您是提供文本的人，并且用户（或您无法控制的其他一些来源）没有提供文本的任何部分，则设置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';
}
document.getElementById('myspan').innerHTML = 'newtext';
我使用Jquery，但以上都没有帮助，我不知道为什么，但这有效：
$("#span_id").text("new_value");