“innerText”适用于IE,但不适用于Firefox

更新 字体我写了一封信 blog post detailing all the differences

Firefox使用W3C标准 Node::textContent ,但其行为与MSHTML的专有行为“略有不同” innerText (不久前,Opera还复制了许多其他MSHTML功能)。

textContent 空白表示不同于 内部文本 ,而innerText没有。

为了让事情更有趣,Opera-除了执行标准之外 -决定还添加MSHTML的 文本内容 -即包括脚本内容(事实上, 文本内容 在Opera中,似乎产生了相同的结果,可能只是彼此的别名)。

是 Node 接口,而 内部文本 HTMLElement . 例如,这意味着您可以“检索” 文本内容 从文本节点:

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

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

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

内部文本 实施在狩猎中, 内部文本 仅当元素为 既不隐藏也不隐藏(通过 style.display == "none" )也不是从文件中孤立出来的。否则,,

我在和你玩 抽象(解决这些缺陷),但结果是 rather complex .

你最好的办法是 首先定义您的确切需求 从那里开始。通常可以简单地从标签上去掉标签 innerHTML 文本内容 偏差。

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

W3C-compliant textContent 财产。

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

如果您只需要设置文本内容而不需要检索,这里有一个简单的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));
}

jQuery .text() 方法,该方法可在任何浏览器中使用。例如:

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

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

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);

Element::innerText 财产遗嘱 包含已被CSS样式隐藏的文本“ display:none

还考虑了其他CSS属性:

• 首先,解析内部元素的“display:”样式,以确定它是否限定块内容(例如“display:block”,它是浏览器内置样式表中HTML块元素的默认值,其行为未被您自己的CSS样式覆盖);如果是这样,将在innerText属性的值中插入一个换行符。textContent属性不会发生这种情况。
• <br \> 生成内联换行符的操作也将在innerText的值中生成换行符。
• “display:table”样式在表格周围和表格行之间生成换行符,但“display:table cell”将生成制表字符。

但是 Element::textContent

使用鼠标选择的复制/粘贴操作将丢弃放入剪贴板的纯文本格式的隐藏文本,因此它不会包含剪贴板中的所有内容 textContent ,但只有内在的东西 innerText (如上所述,在生成空格/换行符之后)。

jQuery将使用添加到通过$()查询返回的解析元素中的“.text()”方法来解决浏览器之间的这些不一致。在内部,它通过查看HTMLDOM解决了这些困难,只处理“节点”级别。因此,它将返回更像标准文本内容的内容。

需要注意的是,这个jQuery方法不会插入任何额外的空格或因子元素(如 <br />

如果您设计了一些可访问性脚本,并且您的样式表被解析为非听觉呈现,例如用于与盲文阅读器通信的插件,如果该工具必须包含特定标点符号,则该工具应该使用textContent,这些标点符号添加在样式为“display:none”的跨距中,并且通常包含在页面中(例如上标/下标),否则内部文本在盲文阅读器上会非常混乱。

使用HTML/CSS解析器和DOM属性“innerText”与现代视觉浏览器中的情况完全相同,现在主要搜索引擎通常会忽略CSS技巧隐藏的文本(也会解析HTML页面的CSS,也会忽略背景上没有对比色的文本)(至少这些不可见的内容不会被编入索引,因此隐藏文本不能用作强制在页面中包含某些关键字以检查其内容的伎俩);但这些隐藏文本仍将显示在结果页面中(如果页面仍然符合要包含在结果中的索引的条件),使用“textContent”属性而不是完整的HTML来剥离额外的样式和脚本。

innerHTML 转让后的财产 内部文本 或 .

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

编辑(感谢Mark Amery在下面的评论):只有当您毫无疑问地知道没有代码会依赖于检查这些属性的存在时,才可以这样做,比如(例如) jQuery 做但是,如果您使用jQuery,您可能只需要使用“text”函数并执行$('#myElement').text('foo'),正如其他一些答案所示。

innerText 已添加到Firefox,应在FF45版本中提供: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

http://rocallahan.github.io/innerText-spec/ https://github.com/whatwg/html/issues/465

请注意,目前Firefox、Chrome和IE的实现都不兼容。展望未来,我们可能会期待Firefox、Chrome和Edge在旧IE仍然不兼容的情况下实现融合。

另见: https://github.com/whatwg/compat/issues/5

这就是我的经验 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。 注2:在chrome中有些工作-更新后,它保持不变,然后单击“离开”并单击“返回”到字段中,值显示。 最好的是 elem.value = changeVal ; 我没有在上面评论。

从2016年的Firefox v45开始, innerText http://caniuse.com/#search=innerText

如果您想让它在Firefox的早期版本上运行,可以使用 textContent : http://caniuse.com/#search=textContent

像这样的怎么样?

//$elem is the jQuery object passed along.

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

只需根据原始帖子下的评论重新发布即可。innerHTML适用于所有浏览器。谢谢stefita。

在这里找到这个:

<!--[if lte IE 8]>
    <script type="text/javascript">
        if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
            !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
          (function() {
            var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
            Object.defineProperty(Element.prototype, "textContent",
              { // It won't work if you just drop in innerText.get
                // and innerText.set or the whole descriptor.
                get : function() {
                  return innerText.get.call(this)
                },
                set : function(x) {
                  return innerText.set.call(this, x)
                }
              }
            );
          })();
    </script>
<![endif]-->

innerText 其他浏览器中的行为:

 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");
         }
     });
 }