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

Posted 2023-02-22

【中文标题】如何使用 JavaScript 更改 span 元素的文本？

【英文标题】：How do I change the text of a span element using JavaScript?

【发布时间】：2010-11-24 10:25:39

【问题描述】：

如果我有一个 span，说：

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

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

【参考方案1】：

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

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

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

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

【讨论】：

@bouncingHippo document.getElementById("myspan").setAttribute("style","cssvalues");

应该有某种方式将这两个答案合并为一个。它的答案完全相同。

这并没有设置 text，它设置了 HTML，这是完全不同的。

@gregoire - 正如其他人已经指出的那样，您的答案容易受到 XSS 的攻击。这个问题已经被浏览了大约 80k 次，这意味着很多人可能已经接管了这个解决方案，并且可能引入了不必要的 xss 泄漏。您是否可以考虑更新您的答案以改用textContent，以便鼓励新人使用正确且安全的方法？

@Tiddo textContent 在 IE8 及以下版本中不受支持，我希望您永远不要在脚本中直接使用未经处理的用户输入。

【参考方案2】：

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

【讨论】：

如果'newtext'包含用户提供的输入，这将导致XSS漏洞。

【参考方案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，我认为应该通过应用分层安全原则将所有内容视为用户输入。这样你就不会遇到任何意外。

【讨论】：

虽然您对 innerHTML 需要谨慎是绝对正确的，但请注意您的解决方案使用了 Firefox 不支持的 innerText。 quirksmode.org/dom/html 它还使用了 IE8 不支持的 textContent。您可以构建代码来解决这些问题。

改用span.appendChild(txt);！

这个问题没有说明用户输入，所以不推荐innerHTML 的笼统声明是荒谬的。更不用说它在消毒后仍然很好。应该清理用户输入的想法与这个特定问题不相关。最多在结尾处写一个小注释：“顺便说一句：如果是用户输入，请确保先清理或使用不需要它的 X 方法”。

使用 appendChild 并没有真正改变文本，它只是增加了文本。在此处使用您的代码，原始问题的跨度最终将变为“hereismytextyour cool text”。也许span.innerHTML = ""; 然后appendChild？

@JimboJonny 在谈到诸如此类已被浏览超过 650,000 次的问题时，OP 具体提出的问题完全无关紧要。因此，为了公共安全，我认为在突出位置提及 XSS 漏洞是谨慎的做法。

【参考方案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';

【参考方案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

【讨论】：

Firefox 在 release 45 中实现了 innerText 支持。

【参考方案6】：

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

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

【参考方案7】：

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

【参考方案8】：

对于这个跨度

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

你可以这样：-

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

【参考方案9】：

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

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

【参考方案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/

【参考方案11】：

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

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

developer.mozilla

【参考方案12】：

你可以的

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

【讨论】：

和我给出的答案有什么不同？

【参考方案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() 更改跨度文本。

【参考方案14】：

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

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

【参考方案15】：

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

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

【讨论】：

Mohamed Nagieb 和 Rayees AC 已经提出了相同的解决方案。

这里使用jQuery而不是纯javascript

【参考方案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; 是让它发挥作用的最佳方式。