如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将“hereismytext”更改为“newtext”?
如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将“hereismytext”更改为“newtext”?
当前回答
对于现代浏览器,您应该使用:
document.getElementById("myspan").textContent="newtext";
虽然旧的浏览器可能不知道textContent,但不建议使用innerHTML,因为当新文本是用户输入时,它会引入XSS漏洞(参见下面的其他答案,了解更详细的讨论):
//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";
其他回答
document.getElementById('myspan').innerHTML = 'newtext';
(函数($){ $(文档)时函数(){ $ (" # myspan”)。text("This is span"); }); } (jQuery)); < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> <span id="myspan"> hereismytext </span>
用户text()更改span文本。
还有另一种方法:
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”。
现场演示:这里
你也可以使用querySelector()方法,假设'myspan' id是唯一的,因为该方法返回带有指定选择器的第一个元素:
document.querySelector('#myspan').textContent = 'newtext';
developer.mozilla
对于现代浏览器,您应该使用:
document.getElementById("myspan").textContent="newtext";
虽然旧的浏览器可能不知道textContent,但不建议使用innerHTML,因为当新文本是用户输入时,它会引入XSS漏洞(参见下面的其他答案,了解更详细的讨论):
//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";