使用Javascript设置HTML <span>元素的内容

Question

我正在调用一个Web服务，该服务返回一个整数值，我需要在一个文本块中显示这个值。目前，我使用的是HTML <span>标签。

到目前为止，我找到了两种将值放入标签中的方法。innerText()是IE中的一种专有方法，而innerHTML()则是非标准兼容的方法，尽管被广泛支持。

从Javascript中设置位于<span>和</span>之间的文本的正确、符合标准的方式是什么？

- Brian Beckett

---

自HTML5起，innerHTML 是规范的一部分，http://dev.w3.org/html5/spec/Overview.html#innerhtml并且被所有浏览器支持（除了IE浏览器存在一些关于在`table`和`select`元素或子元素上设置器的问题）。 翻译：截至HTML5，innerHTML已成为规范的一部分http://dev.w3.org/html5/spec/Overview.html#innerhtml，并受到所有浏览器的支持（但在IE浏览器中，在`table`和`select`元素/子元素上设置器会存在一些问题）。 - scunliffe

Answer 1

在现代浏览器中，您可以设置textContent属性，请参见Node.textContent：

var span = document.getElementById("myspan");
span.textContent = "some text";

- robinst

---

这应该是被接受的答案，因为它更容易阅读和更简洁。 - Sasino

Answer 2

这是符合标准且跨浏览器安全的。

示例：http://jsfiddle.net/kv9pw/

var span = document.getElementById('someID');

while( span.firstChild ) {
    span.removeChild( span.firstChild );
}
span.appendChild( document.createTextNode("some new content") );

- user113716

Answer 3

如果不使用像jQuery这样的JavaScript库，你可以按照以下方式实现：

var span = document.getElementById("myspan"),
    text = document.createTextNode(''+intValue);
span.innerHTML = ''; // clear existing
span.appendChild(text);

如果你想使用jQuery，只需要这样：

$("#myspan").text(''+intValue);

- Brian Donovan

---

你可以直接使用.text(intValue)进行操作，无需通过字符串拼接来强制转换。 - chaos

Answer 4

最符合标准的方法是创建一个包含所需文本的文本节点，并将其附加到 span 上（删除任何当前存在的文本节点）。

我实际上会使用 jQuery 的 .text() 方法来完成。

- chaos