如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将“hereismytext”更改为“newtext”?
如果我有一个跨度,说:
<span id="myspan"> hereismytext </span>
如何使用JavaScript将“hereismytext”更改为“newtext”?
当前回答
对于现代浏览器,您应该使用:
document.getElementById("myspan").textContent="newtext";
虽然旧的浏览器可能不知道textContent,但不建议使用innerHTML,因为当新文本是用户输入时,它会引入XSS漏洞(参见下面的其他答案,了解更详细的讨论):
//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="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”。
现场演示:这里
不推荐使用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的说法,我认为所有的东西都应该被视为用户输入,应用层层安全原则。这样你就不会遇到任何意外。
很多人仍然会遇到这个问题(在2022年),现有的答案并不是最新的。
使用innerText是最好的方法
正如您在MDM Docs中看到的,innerText是通过Javascript检索和更改<span> HTML元素文本的最佳方式。
innerText属性得到了很好的支持(根据Caniuse, 97.53%的web用户)
如何使用
简单的检索和设置新的文本属性,就像这样:
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更好?
第一点,IE8不支持textContent(但我认为在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。是正确的,你可以创建一个新的文本节点,并将它附加到你现有的元素,像这样:
let mySpan = document.getElementById("myspan");
const newTextNode = document.createTextNode("Youhou!"),
mySpan.appendChild(newTextNode);
对于这个张成的空间
<span id="name">sdfsdf</span>
你可以这样做:-
$("name").firstChild.nodeValue = "Hello" + "World";
除了上面的纯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/