11

假设我有以下代码：

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

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

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

4

4 回答 4

21

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

var text = ('innerText' in d)? 'innerText' : 'textContent';
d[text] = 'New text';
于 2012-07-25T09:25:10.297 回答
8

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

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、Closure或其他几个。显然，没有图书馆就无法做到，这只是站在已经完成大量工作的人们的肩膀上的问题。:-)

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

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

而已。

于 2012-07-25T09:16:09.500 回答
1 
d.appendChild(document.createTextNode("new text");
于 2014-08-08T10:35:56.960 回答
1

您只能使用textContent它，它可以在主流浏览器中运行......（FF、Safari 和 Chrome）

var d = document.getElementById('d');
var msg = "new text";
d.textContent = msg;
于 2015-04-12T19:54:01.843 回答