const span = document.querySelector("#span"); const btn = document.querySelector("#changeBtn"); btn。addEventListener("click"， () => { 跨度。innerText = "text changed" }) <span id="span"> <button id="changeBtn">Change Text</button> .

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

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

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

使用innerText是最好的方法

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

innerText属性得到了很好的支持(根据Caniuse, 97.53%的web用户)

如何使用

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

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

不能用于HTML代码插入，类似于: Var a = "获取文件<a href='url'>的链接</a>" Var b = "获取文件<a href='url'>另一个链接</a>" Var c = "get file <a href='url'>last link</a>"

用 getElementById (myspan”)的文件。textContent = a; 在 <span id=“myspan”>第一个文本</span>

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

. getelementbyid(“myspan”)。innerHTML = a到c; 是解决问题的最好办法。

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

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