use*_*033 352 html javascript
如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将"hereismytext"更改为"newtext"？
Gre*_*ire 580
document.getElementById("myspan").textContent="newtext";
对于现代浏览器:
//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";
nic*_*oo. 70
使用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年4月4日编辑:
根据@mumush建议修改第三行代码:"使用appendChild();而不是".
顺便说一句,根据@Jimbo Jonny的说法,我认为通过应用层次安全原则,一切都应该被视为用户输入.这样你就不会遇到任何意外.
Dan*_*Dan 28
document.getElementById('myspan').innerHTML = 'newtext';
Tro*_*ott 23
编辑:这是写于2014年.你可能不再关心IE8,可以忘记使用innerText.只是使用textContent并完成它,万岁.
如果您是提供文本的人,并且文本的任何部分都不是由用户(或您无法控制的其他来源)提供的,那么设置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';
}
she*_*bye 14
我使用Jquery并没有上述任何帮助,我不知道为什么但这有效:
$("#span_id").text("new_value");
这是另一种方式:
var myspan = document.getElementById('myspan');
if (myspan.innerText) {
myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
myspan.textContent = "newtext";
}
Safari,Google Chrome和MSIE将检测innerText属性.对于Firefox,标准的处理方式是使用textContent,但是从版本45开始它也有一个innerText属性,最近有人向我提出了通知.此解决方案测试浏览器是否支持这些属性中的任何一个,如果支持,则分配"newtext".
现场演示:这里
许多人（2022 年）仍然遇到这个问题，并且可用的答案并不是最新的。
innerText是最好的方法正如您在MDM 文档 中看到的，innerText这是通过 Javascript 检索和更改 HTML 元素文本的最佳方法<span>。
该innerText属性得到了很好的支持（根据 Caniuse 的数据，97.53%的网络用户）
使用如下属性简单检索和设置新文本：
let mySpan = document.getElementById("myspan");
console.log(mySpan.innerText);
mySpan.innerText = "Setting a new text content into the span element.";
innerHTML？不要使用innerHTML用户输入来更新内容，这可能会导致重大漏洞，因为您将设置的字符串内容将被解释并转换为 HTML 标记。
这意味着用户可以将脚本插入您的站点，这称为 XSS 攻击/漏洞（跨站点脚本）。
textContent？第一点textContent不受 IE8 支持（但我认为到 2022 年就没有人再关心了）。但主要元素是您可以使用textContent而不是获得的结果的真正差异innerText。
MDM 文档中的示例非常适合说明这一点，因此我们有以下设置：
<p id="source">
<style>#source { color: red; } #text { text-transform: uppercase; }</style>
<span id=text>Take a look at<br>how this text<br>is interpreted
below.</span>
<span style="display:none">HIDDEN TEXT</span>
</p>
如果使用innerText检索<p id="source">我们得到的文本内容：
TAKE A LOOK AT
HOW THIS TEXT
IS INTERPRETED BELOW.
这正是我们想要的。
现在使用textContent我们得到：
#source { color: red; } #text { text-transform: uppercase; }
Take a look athow this textis interpreted
below.
HIDDEN TEXT
不完全是你所期望的......
这就是为什么使用textContent不是正确的方法。
如果您的目标只是将文本附加到<p>或<span>HTML 元素，那么nicooo 的答案是。是的，您可以创建一个新的文本节点并将其附加到现有元素，如下所示：
TAKE A LOOK AT
HOW THIS TEXT
IS INTERPRETED BELOW.
除了上面的纯 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/