如何在JavaScript中更改span元素的文本

如果我有一个跨度,说:

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

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

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

编辑对于现代浏览器:

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

使用innerHTML不推荐的 。 相反,你应该创build一个textNode。 这样,你“绑定”你的文本,而且你至less在这种情况下不容易受到XSS攻击。

 document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!! 

正确的方式:

 span = document.getElementById("myspan"); txt = document.createTextNode("your cool text"); span.appendChild(txt); 

有关此漏洞的更多信息: 跨站点脚本(XSS) – OWASP

2017年第四届编辑:

根据@mumushbuild议修改第三行代码:“use appendChild(); instead”。
顺便说一句,根据@Jimbo乔尼我认为一切应该被视为用户input应用安全层的原则。 这样你就不会遇到任何惊喜。

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

如果您是提供文本的文本,并且文本的任何部分都不是由用户(或者您不能控制的其他来源)提供的,那么设置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'; 

但是,正如其他人所指出的那样,如果您不是文本string的任何部分的来源,那么使用innerHTML可以使您像XSS一样的内容注入攻击,如果您不小心先正确地处理文本。

如果您使用的是来自用户的input,这里有一种安全的方法,同时保持跨浏览器的兼容性:

 var span = document.getElementById('myspan'); span.innerText = span.textContent = 'newtext'; 

Firefox不支持innerText ,IE8不支持textContent所以如果你想保持跨浏览器的兼容性,你需要使用两者。

如果你想在可能的情况下避免回stream(由innerText引起):

 var span = document.getElementById('myspan'); if ('textContent' in span) { span.textContent = 'newtext'; } else { span.innerText = 'newtext'; } 

我使用Jquery和以上都没有帮助,我不知道为什么,但工作:

  $("#span_id").text("new_value"); 

这是另一种方式:

 var myspan = document.getElementById('myspan'); if (myspan.innerText) { myspan.innerText = "newtext"; } else if (myspan.textContent) { myspan.textContent = "newtext"; } 

innerText属性将被Safari,Google Chrome和MSIE检测到。 对于Firefox来说,标准的做法是使用textContent,但从版本45开始,它也有一个innerText属性,正如最近有人亲切地告诉我的。 此解决schemetesting以查看浏览器是否支持这些属性之一,如果是,则分配“newtext”。

现场演示: 在这里

像其他答案一样,不推荐使用innerHTMLinnerText ,最好使用textContent 。 这个属性得到很好的支持,你可以查看这个: http : //caniuse.com/#search=textContent

对于这个跨度

 <span id="name">sdfsdf</span> 

你可以这样做:

 $("name").firstChild.nodeValue = "Hello" + "World";