用于设置值的跨浏览器 innerText答案

【问题标题】：Cross-browser innerText for setting values用于设置值的跨浏览器 innerText
【发布时间】：2012-07-23 16:30:38
【问题描述】：

假设我有以下代码：

<html>
  <head></head>
  <body>
   <div id="d">some text</div>

  <script type="text/javascript">
    var d = document.getElementByid('d');
    var innerText = d.innerText || d.textContent;

    innerText = 'new text';
  </script>
  </body>
</html>

我想更改 id='d' 的 div 标签的文本值。不幸的是，上面的代码块不起作用，文本内容也没有改变。

如果执行以下配方，它会起作用：

if (d.innerText) d.innerText = 'new text';
else d.textContent = 'new text';

但我不喜欢上面的食谱，因为它不紧凑。

你有什么建议为什么第一种方法不起作用？

【问题讨论】：

为什么不将第二种解决方案放入一个函数中，其中一个参数用于元素，一个参数用于字符串。然后你只需要做setText(mydiv, "new text");
不是document.getElementByid 应该是document.getElementById I id 应该大写。
d[('innerText' in d) ? 'innerText' : 'textContent' ] = 'New text';

标签： javascript html cross-browser innertext

【解决方案1】：

您可以获取属性并使用它，而不是多次分配

var text = ('innerText' in d)? 'innerText' : 'textContent';
d[text] = 'New text';

【讨论】：

太棒了！这是我需要的。非常感谢。
这是一种绝妙的处理方式，很高兴我偶然发现了它。

【解决方案2】：

第一种方法不起作用，因为它所做的只是将变量设置为新值，而不是将值写入元素。线

var innerText = d.innerText || d.textContent;

...将变量innerText 设置为它找到的文本属性的值，它不是对实际属性本身的引用。

你必须做分支，例如：

var d = document.getElementById('d');
var msg = "new text";
if ("innerText" in d) {
    d.innerText = msg;
}
else {
    d.textContent = msg;
}

该功能-通过查找元素上是否存在属性来检测浏览器是否使用innerText或textContent（这就是in运算符所做的，检查对象是否具有具有给定名称的属性，即使该属性为空，null、undefined 等）。

你甚至可以为它自己写一个函数：

var setText = (function() {
    function setTextInnerText(element, msg) {
        element.innerText = msg;
    }

    function setTextTextContent(element, msg) {
        element.textContent = msg;
    }

    return "innerText" in document.createElement('span') ? setTextInnerText : setTextTextContent;
})();

它只进行一次特征检测，并返回一个函数，任何半体面的引擎都会为您内联。

或者，如果您希望将消息中的 HTML 标记作为标记（而不是文字文本）处理，您可以使用 innerHTML（这在浏览器中是一致的）。但同样，如果您使用innerHTML，则会处理可能不是您想要的标记。

我发现使用好的 JavaScript 库来处理这些浏览器差异（并提供更多有用的功能）很有用，例如 jQuery、YUI、@987654323 @，或any of several others。显然，没有图书馆就无法做到，这只是站在已经完成大量工作的人们的肩膀上的问题。 :-)

在这种情况下，例如，使用 jQuery，上面将是：

$("#d").text("new text");

就是这样。

【讨论】：

感谢您的回复，但我需要innerText。好的，我会使用分支
YUI 有方法 innerText 吗？
@Erik：很高兴有帮助。我解释了它是如何工作的（功能测试）。
@Erik: "YUI 有方法 innerText" 粗略搜索一下文档建议that yes, it does。（我不使用 YUI，但文档很容易使用。）
您的代码将无法工作，因为它有一个错字getElementByid 应该是getElementById

【解决方案3】：

d.appendChild(document.createTextNode("new text");

【讨论】：

【解决方案4】：

您只能使用textContent，它适用于主流浏览器...（FF、Safari 和 Chrome）

var d = document.getElementById('d');
var msg = "new text";
d.textContent = msg;

【讨论】：