In Internet Explorer, ‘innerText’ works, but not in Firefox.

Problem

I have some JavaScript code that works on Internet Explorer, and it looks like this:

myElement.innerText = "foo";

However, it appears that Firefox does not support the ‘innerText’ attribute. Is there something similar in Firefox? Is there a more generic property that can be utilized across browsers?

Asked by Ray

Solution #1

Update: I’ve written a blog article that goes into all of the changes in greater depth.

Firefox uses W3C standard Node::textContent, but its behavior differs “slightly” from that of MSHTML’s proprietary innerText (copied by Opera as well, some time ago, among dozens of other MSHTML features).

To begin with, the whitespace representation of textContent differs from that of innerText. Second, and more significantly, textContent contains all of the contents of the SCRIPT tag, whereas innerText does not.

To make things more interesting, Opera chose to include MSHTML’s innerText, but altered it to act as textContent – i.e. including SCRIPT contents – in addition to ordinary textContent (in fact, textContent and innerText in Opera seem to produce identical results, probably being just aliased to each other).

innerText is part of HTMLElement, whereas textContent is part of Node interface. This means that you can “extract” textContent from text nodes but not innerText:

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

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

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

Finally, Safari 2.x includes a flaky implementation of innerText. Only if an element is neither hidden (through style.display == “none”) nor orphaned from the document does innerText work properly in Safari. If you don’t use innerText, you’ll get an empty string.

To work around these flaws, I experimented with textContent abstraction, but it proved to be quite difficult.

The best course of action is to first identify your precise requirements and then go from there. Rather than dealing with all of the various textContent/innerText variances, it is frequently possible to just strip tags from an element’s innerHTML.

Of course, another option is to recursively walk the DOM tree and collect text nodes.

Answered by kangax

Solution #2

The W3C-compliant textContent attribute is used by Firefox.

This attribute is probably supported by Safari and Opera as well.

Answered by Prakash K

Solution #3

If you simply need to set text content rather than get it, here’s a quick DOM version that works in any browser and doesn’t require the IE innerText extension or the DOM Level 3 Core textContent property.

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

Answered by bobince

Solution #4

Any browser can use the.text() method provided by jQuery. Consider the following scenario:

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

Answered by user161433

Solution #5

Firefox does not support the innerText property, according to Prakash K’s response. As a result, you can simply check whether the user agent supports this property and proceed as follows:

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

Answered by rism

Post is based on https://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox