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

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

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

Answer 3

编辑：这是 2014 年写的。很多东西都变了。 您可能不再关心 IE8。 Firefox 现在支持innerText 。

如果您是提供文本的人，并且用户（或您无法控制的其他来源）没有提供任何文本部分，那么设置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 4

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

Answer 5

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

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

Answer 6

这是另一种方式：

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

现场演示：这里

Answer 7

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

Answer 8

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

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

开发者.mozilla

Answer 9

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

Answer 10

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

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

Answer 11

你可以做

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

Answer 12

 (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 13

不能与 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;
是让它工作的最好方法。

Answer 14

许多人仍然遇到这个问题（2022 年），并且可用的答案并不是最新的。

使用innerText是最好的方法

正如您在MDM 文档中看到的， innerText是通过 Javascript 检索和更改<span> HTML 元素的文本的最佳方式。

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更好？

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

Answer 15

对于这个跨度

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

你可以这样：-

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

Answer 16

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

似乎与跨度、类/按钮中的文本一起使用

Answer 17

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

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