如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将“hereismytext”更改为“newtext”?
如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将“hereismytext”更改为“newtext”?
当前回答
不推荐使用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的说法,我认为所有的东西都应该被视为用户输入,应用层层安全原则。这样你就不会遇到任何意外。
其他回答
编辑:这篇文章写于2014年。很多事情已经发生了变化。你可能不再关心IE8了。Firefox现在支持innerText。
如果你是提供文本的人,而没有一部分文本是由用户提供的(或其他一些你不能控制的来源),那么设置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';
然而,正如其他人指出的那样,如果您不是文本字符串的任何部分的源,那么如果您不注意首先正确地清除文本,那么使用innerHTML可能会使您遭受像XSS这样的内容注入攻击。
如果你使用来自用户的输入,这里有一种方法可以安全地做到这一点,同时还保持跨浏览器的兼容性:
var span = document.getElementById('myspan');
span.innerText = span.textContent = 'newtext';
Firefox不支持innerText, IE8也不支持textContent,所以如果你想保持跨浏览器兼容性,你需要同时使用这两种浏览器。
如果你想避免回流(由innerText引起)在可能的情况下:
var span = document.getElementById('myspan');
if ('textContent' in span) {
span.textContent = 'newtext';
} else {
span.innerText = '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/
出于某种原因,使用“text”属性似乎是大多数浏览器的通行方式。 这对我很有效
$ (" # span_id”)。文本(“要赋值的文本值”);
和其他答案一样,不建议使用innerHTML和innerText,最好使用textContent。这个属性很受支持,你可以这样检查它: http://caniuse.com/#search=textContent
我使用Jquery,上面没有一个帮助,我不知道为什么,但这是有效的:
$("#span_id").text("new_value");