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

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

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

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

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

使用innerHTML是所以不建议。 相反，您应该创建一个textNode。通过这种方式，你在“绑定”你的文本，至少在这种情况下，你不会容易受到XSS攻击

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

正确的做法:

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

有关此漏洞的更多信息: 跨站点脚本(XSS) - OWASP < / p >

编辑于2017年11月4日:

根据@mumush修改的第三行代码建议:"use appendChild();相反”。
顺便说一句，根据@Jimbo乔尼，我认为所有的东西都应该被视为用户输入，应用层层安全原则。这样你就不会遇到任何惊喜。

编辑:本文写于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';
}

还有另一种方法:

var myspan = document.getElementById('myspan');


if (myspan.innerText) {
myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
myspan.textContent = "newtext";
}

innerText属性将被Safari，谷歌Chrome和MSIE检测。对于Firefox来说，标准的操作方式是使用textContent，但是从版本45开始，它也有一个innerText属性，就像最近有人好心告诉我的那样。该解决方案测试浏览器是否支持这些属性，如果支持，则分配“newtext”。

现场演示:在这里

我使用Jquery，上面没有一个帮助，我不知道为什么，但这是有效的:

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

对于这个张成的空间

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

你可以这样做:-

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

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

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

除了上面的纯javascript答案，你可以使用jQuery 文本方法如下:

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

如果你需要扩展答案以获取/更改span或div元素的超文本标记语言内容，你可以这样做:

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

引用:

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

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

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

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

developer.mozilla .mozilla

你可以做

document.querySelector(“[时间]”)。textContent = "content_to_display";

(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()修改span文本。

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

似乎工作与span，类/按钮内的文本

由于某种原因，似乎使用“;text"属性是大多数浏览器使用的方式。 它对我有用

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

不能用于HTML代码插入，例如 var a = "get the file <a href='url'>the link</a>" < br > var b = "get the file <a href='url'>another link</a>" < br > var c = "get the file <a href='url'>last link</a>" < br > < / p > 使用< br > < p > document.getElementById("myspan").textContent=a; < br > 在< br > <span id="myspan">first text</span> < br > < / p >

使用计时器，但它只是将引用目标显示为文本，而不是运行代码，即使它在源代码中正确显示。如果jquery方法不是真正的解决方案，使用:

很多人仍然会遇到这个问题(在2022年)，现有的答案并不是最新的。

使用innerText是最好的方法

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

innerText属性非常受支持(所有web用户的97.53% 根据Caniuse的说法)

如何使用

简单的检索和设置新的文本属性，就像这样:

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

为了说明这一点，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);