Question

假设我有以下代码：

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

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

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

Answer 1

您可以获取该属性并使用该

，而不是多次分配

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

Answer 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库来处理这些浏览器差异（以及提供 ton 的有用的进一步功能）很有用，例如jQuery，{{3} }，YUI或Closure。显然，如果没有一个图书馆，你无法做任何事情，这只是站在那些已经完成了大量工作的人的肩膀上的问题。： - ）

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

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

就是这样。

Answer 3

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

Answer 4

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

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

用于设置值的跨浏览器innerText

4 个答案: