Question

如果我有一个跨度，请说：

<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 SO NOT WOMOMENDED 。相反，您应该创建一个textNode。这样，你就是＆＃34;绑定＆＃34;你的文字，至少在这种情况下你不容易受到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年4月4日编辑：

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

Answer 3

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

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

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

现场演示：here

Answer 7

除了上述纯JavaScript答案外，您还可以使用jQuery text 方法，如下所示：

$('#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';

developer.mozilla

Answer 9

与其他答案一样，不建议使用 innerHTML 和 innerText ，最好使用 textContent 。这个属性得到很好的支持，你可以检查一下： http://caniuse.com/#search=textContent

Answer 10

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

这将选择ID为myspan的dom节点，并将其文本内容更改为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

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

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

Answer 14

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

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

Answer 15

这个范围

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

你可以这样： -

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

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

15 个答案: