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

如果我有跨度，请说：

<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";

使用的innerHTML是SO不推荐。相反，您应该创建一个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所说，我认为应该通过应用“分层安全性”原则将所有内容都视为用户输入。这样，您就不会遇到任何惊喜。

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

编辑：这是在2014年编写的。您可能不再关心IE8了，可能会忘记使用innerText。textContenthooray，只需使用并完成它。

如果您是提供文本的用户，而用户（或您无法控制的其他来源）没有提供文本的任何部分，则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';
}

我使用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”。

现场演示：这里

除了上面的纯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/

您还可以使用querySelector（）方法，假设“ myspan” ID是唯一的，因为该方法返回具有指定选择器的第一个元素：

document.querySelector('#myspan').textContent = 'newtext';

developer.mozilla

像在其他答案中一样，不建议使用innerHTML和innerText，最好使用textContent。很好地支持此属性，您可以对此进行检查：http : //caniuse.com/#search=textContent

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

这将选择ID为的dom-node myspan并将其文本内容更改为new text

你可以做

 document.querySelector（“ [Span]”）。textContent =“ content_to_display”; 

对于这个跨度

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

你可以这样：-

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