javascript - 使用 JavaScript 更改页面上的文本和元素的正确方法

Question

我已经使用 innerHTML 和 innerText 来更改网页上的元素和文本一段时间了，但我刚刚发现它们不是 W3C 标准。

我现在发现 innerHTML 可以替换为 createElement、setAttribute 和其他一些，但是最好的更改方法是什么元素内的文本？

我也找到了一个textContent，但是是否有标准方法并且它是否在旧版浏览器中广泛实现？

Answer 1

textContent 未在 IE8 及更低版本中实现。您可以使用createTextNode()与使用 createElement() 的方式类似。但是，我经常使用发现技术来找出我需要使用哪个属性并保留对其的引用:

// You can use a shorter variable name if you want
var innerTextOrTextContent = "textContent" in document.body 
                               ? "textContent" : "innerText";

// Set an element's text:
myElement[innerTextOrTextContent] = "Added using: "+innerTextOrTextContent;

createTextNode() 示例:

var tNode = document.createTextNode("Added using createTextNode()");
myElement.appendChild(tNode);

我经常忘记的一点是，如果您可以获得对它的引用，您也可以直接设置文本节点的值:

// childNodes[0] is a text node:
myElement.childNodes[0].nodeValue = "Added using nodeValue";

示例 - http://jsfiddle.net/BxPaG/ .