如何使用 JavaScript 更改 span 元素的文本？

javascript html

2022-08-29 23:10:32

如果我有一个跨度，说：

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

如何使用JavaScript将“hereismytext”更改为“newtext”？

答案 1

对于现代浏览器，您应该使用：

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

虽然较旧的浏览器可能不知道，但不建议使用它，因为当新文本是用户输入时，它会引入XSS漏洞（有关更详细的讨论，请参阅下面的其他答案）：textContentinnerHTML

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

答案 2

因此不建议使用innerHTML。相反，您应该创建一个 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的说法，我认为一切都应该通过应用层安全性原则来被视为用户输入。这样你就不会遇到任何惊喜。