如果我有一个跨度,说:

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

如何使用JavaScript将“hereismytext”更改为“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”。

现场演示:这里

其他回答

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

除了上面的纯javascript答案,你可以使用jQuery文本方法如下:

$('#myspan').text('newtext');

如果你需要扩展答案以获取/更改span或div元素的html内容,你可以这样做:

$('#mydiv').html('<strong>new text</strong>');

引用:

。text (): http://api.jquery.com/text/

. html (): http://api.jquery.com/html/

不推荐使用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").textContent="newtext";

虽然旧的浏览器可能不知道textContent,但不建议使用innerHTML,因为当新文本是用户输入时,它会引入XSS漏洞(参见下面的其他答案,了解更详细的讨论):

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

出于某种原因,使用“text”属性似乎是大多数浏览器的通行方式。 这对我很有效

$ (" # span_id”)。文本(“要赋值的文本值”);