如何在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”。
现场演示: 在这里
像其他答案一样,不推荐使用innerHTML和innerText ,最好使用textContent 。 这个属性得到很好的支持,你可以查看这个: http : //caniuse.com/#search=textContent
对于这个跨度
<span id="name">sdfsdf</span>
你可以这样做:
$("name").firstChild.nodeValue = "Hello" + "World";