如何使用 JavaScript 更改 span 元素的文本？

Question

如果我有一个 span，说：

<span id="myspan"> hereismytext </span>

如何使用 JavaScript 将“hereismytext”更改为“newtext”？

Answer 1

对于现代浏览器，您应该使用：

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

虽然较旧的浏览器可能不知道textContent，但不建议使用innerHTML，因为当新文本是用户输入时它会引入XSS 漏洞（有关更详细的讨论，请参阅下面的其他答案）：

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

Answer 2

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

Answer 3

使用 innerHTML 是不推荐。 相反，您应该创建一个 textNode。这样，您就可以“绑定”您的文本，并且至少在这种情况下，您不会容易受到 XSS 攻击。

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!

正确的方法：

span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);

有关此漏洞的更多信息： Cross Site Scripting (XSS) - OWASP

2017 年 11 月 4 日编辑：

根据@mumush建议修改第三行代码：“使用appendChild();代替”。
顺便说一句，根据@Jimbo Jonny，我认为应该通过应用分层安全原则将所有内容视为用户输入。这样你就不会遇到任何意外。

Answer 4

编辑：这是在 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';
}

Answer 5

这是另一种方式：

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”。

现场演示：here

Answer 6

我使用Jquery，但以上都没有帮助，我不知道为什么，但这有效：

 $("#span_id").text("new_value");

Answer 7

与其他答案一样，不推荐使用 innerHTML 和 innerText，最好使用 textContent。此属性得到很好的支持，您可以检查它： http://caniuse.com/#search=textContent

Answer 8

对于这个跨度

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

你可以这样：-

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

Answer 9

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

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

Answer 10

除了上面的纯javascript答案外，您还可以使用jQuery text 方法如下：

$('#myspan').text('newtext');

如果您需要扩展答案以获取/更改 html span 或 div 元素的内容，您可以这样做：

$('#mydiv').html('<strong>new text</strong>');

参考资料：

.text(): http://api.jquery.com/text/

.html():http://api.jquery.com/html/

Answer 11

您也可以使用 querySelector() 方法，假设 'myspan' id 是唯一的，因为该方法返回具有指定选择器的第一个元素：

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

developer.mozilla

Answer 12

你可以的

 document.querySelector("[Span]").textContent = "content_to_display"; 

Answer 13

(function ($) {
    $(document).ready(function(){
    $("#myspan").text("This is span");
  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="myspan"> hereismytext </span>

用户 text() 更改跨度文本。

Answer 14

我用过这个document.querySelector('ElementClass').innerText = 'newtext';

似乎适用于跨度、类/按钮中的文本

Answer 15

出于某种原因，似乎使用“文本”属性是大多数浏览器的方式。 它对我有用

$("#span_id").text("要分配的文本值");

Answer 16

不能用于 HTML 代码插入，例如：
var a = "get the file <a href='url'>the link</a>"
var b = "get the file <a href='url'>another link</a>"
var c = "get the file <a href='url'>last link</a>"

使用
document.getElementById("myspan").textContent=a;
开启
<span id="myspan">first text</span>

带有计时器，但它只是将参考目标显示为文本而不运行代码，即使它确实在源代码上正确显示。如果 jquery 方法不是真正的解决方案，请使用：

document.getElementById("myspan").innerHTML = a to c;
是让它发挥作用的最佳方式。