如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将“hereismytext”更改为“newtext”?
如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将“hereismytext”更改为“newtext”?
当前回答
你也可以使用querySelector()方法,假设'myspan' id是唯一的,因为该方法返回带有指定选择器的第一个元素:
document.querySelector('#myspan').textContent = 'newtext';
developer.mozilla
其他回答
你也可以使用querySelector()方法,假设'myspan' id是唯一的,因为该方法返回带有指定选择器的第一个元素:
document.querySelector('#myspan').textContent = 'newtext';
developer.mozilla
对于这个张成的空间
<span id="name">sdfsdf</span>
你可以这样做:-
$("name").firstChild.nodeValue = "Hello" + "World";
不推荐使用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的说法,我认为所有的东西都应该被视为用户输入,应用层层安全原则。这样你就不会遇到任何意外。
document.getElementById('myspan').innerHTML = 'newtext';
还有另一种方法:
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”。
现场演示:这里