'innerText' works in IE, but not in Firefox

Question

I have some JavaScript code that works in IE containing the following:

myElement.innerText = "foo";

However, it seems that the 'innerText' property does not work in Firefox. Is there some Firefox equivalent? Or is there a more generic, cross browser property that can be used?

Answer 1

This should do it

myElement.innerHTML = "foo";

Answer 2

Firefox uses the W3C-compliant textContent property.

I'd guess Safari and Opera also support this property.

Answer 3

As per Prakash K's answer FireFox does not support the innerText property. So as is the recommended practise you can simply test whether the user agent supports this property and act accordingly as below:

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

Answer 4

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).

First of all, textContent whitespace representation is different from innerText one. Second, and more importantly, textContent includes all of SCRIPT tag contents, whereas innerText doesn't.

Just to make things more entertaining, Opera - besides implementing standard textContent - decided to also add MSHTML's innerText but changed it to act as textContent - i.e. including SCRIPT contents (in fact, textContent and innerText in Opera seem to produce identical results, probably being just aliased to each other).

And finally, Safari 2.x also has buggy innerText implementation. In Safari, innerText functions properly only if an element is neither hidden (via style.display == "none") nor orphaned from the document. Otherwise, innerText results in an empty string.

I was playing with textContent abstraction (to work around these deficiencies), but it turned out to be rather complex.

You best bet is to first define your exact requirements and follow from there. It is often possible to simply strip tags off of innerHTML of an element, rather than deal with all of the possible textContent/innerText deviations.

Another possibility, of course, is to walk the DOM tree and collect text nodes recursively.

Answer 5

If you only need to set text content and not retrieve, here's a trivial DOM version you can use on any browser; it doesn't require either 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));
}

Answer 6

if you are having cross browser issues I would go ahead and use jquery. It supports many, many browsers.

Example:

 $(document).ready(function() {
      // do stuff when DOM is ready
      $('myElement').text("Foo");
 });

This works for all browsers. This way you don't have to worry about if it will work in a certain browser or not.

Answer 7

This has been my experience with innerText, textContent, innerHTML, and value:

// 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 = internet explorer, ff = firefox, ch = google chrome. note 1: ff works until after value is deleted with backspace - see note by Ray Vega above. note 2: works somewhat in chrome - after update it is unchanged then you click away and click back into the field and the value appears. The best of the lot is elem.value = changeVal; which I did not comment out above.

Answer 8

I recently had to do this...

if (is.ie)
    chatboxitem += chatbox.getItem(i)._textElement.innerText + "<br/>";
else
    chatboxitem += chatbox.getItem(i)._textElement.textContent + "<br/>";