Javascript '；innerText'；适用于IE，但不适用于Firefox

我有一些在IE中工作的JavaScript代码，包含以下内容：

myElement.innerText = "foo";

然而，“innerText”属性似乎在Firefox中不起作用。有Firefox的等价物吗？或者是否有更通用的跨浏览器属性可供使用？

Firefox使用该属性

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

---

我猜Safari和Opera也支持这个属性。

根据Prakash K的回答，Firefox不支持innerText属性。因此，您可以简单地测试用户代理是否支持此属性，并按照以下步骤进行相应操作：

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

更新：我写了一篇更好的文章

---

Firefox使用W3C标准的

Node:：textContent

，但其行为与MSHTML专有的

innerText

“略有不同”（不久前，Opera还复制了许多其他MSHTML功能）

首先，

textContent

whitespace表示不同于

innerText

one。其次，也是更重要的一点，

textContent

包括所有脚本标记内容，而innerText不包括

为了让事情变得更有趣，Opera除了实现标准的

textContent

，还决定添加MSHTML的

innerText

，但将其更改为充当

textContent

——即包括脚本内容（事实上，Opera中的

textContent

和

innerText

似乎产生了相同的结果，可能只是彼此有别名）

textContent

是

Node

接口的一部分，而

innerText

是

HTMLElement

的一部分。例如，这意味着您可以从文本节点“检索”

textContent

，但不能

innerText

：

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

最后，Safari 2.x也有错误的

innerText

实现 既不隐藏（通过

style.display==“none”

），也不孤立于文档。否则，

innerText

将生成空字符串

我在玩

textContent

abstraction（为了解决这些缺陷），但结果是

你最好的选择是首先定义你的确切需求，然后从那里开始。通常可以简单地从元素的

innerHTML

中去掉标记，而不是处理所有可能的

textContent

/

innerText

偏差

---

当然，另一种可能是遍历DOM树并递归地收集文本节点。

如果您只需要设置文本内容而不需要检索，这里有一个简单的DOM版本，您可以在任何浏览器上使用；它不需要IE innerText扩展或DOM Level 3 Core textContent属性

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

提供可在任何浏览器中使用的方法。例如：

$('#myElement').text("Foo");

---

这是我对

innerText

、

textContent

、

innerHTML

和值的体验：

// elem.innerText = changeVal;  // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal;  // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal);  // does not work on ie ff or ch
// elem.innerHTML = changeVal;  // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
   elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch

ie=InternetExplorer，ff=firefox，ch=GoogleChrome。 注1:ff在使用退格删除值之前有效-请参见上面Ray Vega的注释。 注2：在chrome中有些工作-更新后，它保持不变，然后单击“离开”并单击“返回”到字段中，值显示。

---

最好的是

elem.value=changeVal

；我没有在上面注释。

注意

元素：：innerText

属性将不包含被谷歌浏览器中CSS样式“

显示：无”隐藏的文本（它还将删除被其他CSS技术屏蔽的内容（包括字体大小：0、颜色：透明以及其他一些导致文本无法以任何可见方式呈现的类似效果）

还考虑了其他CSS属性：


首先，解析内部元素的“display:”样式，以确定它是否限定块内容（例如“display:block”，它是浏览器内置样式表中HTML块元素的默认值，其行为未被您自己的CSS样式覆盖）；如果是，将在innerText属性的值中插入换行符。这不会发生在textContent属性中
还将考虑生成内联内容的CSS属性：例如，生成内联换行符的内联元素
也将在innerText的值中生成换行符
“display:inline”样式不会在textContent或innerText中产生换行符
“display:table”样式在表格周围和表格行之间生成换行符，但“display:table cell”将生成制表字符
“position:absolute”属性（与display:block或display:inline一起使用，这无关紧要）也会导致插入换行符
一些浏览器还将在跨距之间包含单个空格分隔

但是
Element:：textContent
仍将独立于应用的CSS包含内部文本元素的所有内容，即使它们不可见。并且不会在textContent中生成额外的换行符或空格，这只会忽略所有样式以及内部元素的结构和内联/块或定位类型

使用鼠标选择的复制/粘贴操作将丢弃剪贴板中纯文本格式的隐藏文本，因此它不会包含
textContent
中的所有内容，而只包含
innerText
中的内容（如上所述生成空格/换行符后）

Google Chrome支持这两个属性，但它们的内容可能会有所不同。innetText中仍然包含旧浏览器的所有内容，就像textContent现在包含的内容一样（但它们在生成空格/换行符时的行为并不一致）

jQuery将使用“.text（）”me解决浏览器之间的这些不一致
 if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
     HTMLElement.prototype.__defineGetter__("innerText", function () {
         if (this.textContent) {
             return this.textContent;
         } else {
             var r = this.ownerDocument.createRange();
             r.selectNodeContents(this);
             return r.toString();
         }
     });
     HTMLElement.prototype.__defineSetter__("innerText", function (str) {
         if (this.textContent) {
             this.textContent = str;
         } else {
             this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n");
         }
     });
 }

myElement.innerText = myElement.textContent = "foo";

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();