Cody Taylor

JavaScript innerText and textContent

I was having an issue with the javascript innerText property today. I was to lazy to convert the legacy code that I was working on to use proper DOM so I did some reading on the issue.

Turns out that FireFox doesn’t use innerText at all. Apparently the proper DOM property to use is textContent. textContent does basically the same thing as innerText.

A not so pretty solution to this issue is to check at the start of the script whether the browser supports innerText or textContent. I found a few resources that allowed me to copy and paste a few lines to make everything work.

This one which I found on coderlab is a little bulky but it gets the job done. It checks which property is available and then forces the programmer to check that flag every time he wants to use the property.

var hasInnerText =
(document.getElementsByTagName("body")[0].innerText\
 != undefined) ? true : false;
var elem = document.getElementById('id');
if(!hasInnerText){
    elem.textContent = value;
} else{
    elem.innerText = value;
}

This is the method I actually used. I just or’d the two different properties together and it seemed to work. I guess one will always be undefined.

var message = elem.innerText || elem.textContent || "";

At least FireFox is following the standards unlike Internet Explorer which always needs special css and javascript. Making everything work in Internet Explorer always adds hours onto development time…

Tags: fail, firefox, innerText, javascript, textContent

This entry was posted on Tuesday, July 28th, 2009 at and is filed under . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

9 Responses to “JavaScript innerText and textContent”

• Cody Taylor (codytaylor) 's status on Tuesday, 28-Jul-09 15:27:51 UTC - Identi.ca Says:
  July 28th, 2009 at

  […] JavaScript innerText and textContent http://codytaylor.org/?p=14201 […]
• Daniel Says:
  July 28th, 2009 at

  textContent is the standard, not innerText. What DOM standard are you reading?

  http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent

  Regardless, still a problem that needs solving for cross-browser compatibility.
• Cody Taylor Says:
  July 28th, 2009 at

  Thanks for the heads up. Fixed the post. Glad to hear that FireFox is following the standards.
• Dave Says:
  July 28th, 2009 at

  That code won’t work for IE8, it will return undefined for elements that have an empty string for their text. Instead, use this:

  var message = elem.innerText || elem.textContent || “”;

  or use jQuery.
• Jason Davis Says:
  July 28th, 2009 at

  Of course, Mozilla also lets you do this:
  

  HTMLElement.prototype.__defineGetter__("innerText", function() {
      return this.textContent;
  });
  HTMLElement.prototype.__defineSetter__("innerText", function(val) {
      return this.textContent = val;
  });
  
• Alex Says:
  July 29th, 2009 at

  “innerText” has line breaks base on HTML semantics, but no “textContent”.

  http://ccapeng.blogspot.com/2006/01/firefox-innertext.html
• Cody Taylor Says:
  July 29th, 2009 at

  @Dave Thanks for the tip. I updated the post accordingly.
• ktjrdn Says:
  January 27th, 2010 at

  I’mlearning here, so don’t laugh at me if this is a dumb question. But is there any reason you couldn’t just do:

  var elem = document.getElementById(‘id’);
  elem.textContent = value;
  elem.innerText = value;

  Is there a need to explicitly check the browser support instead of just setting them both?
• RLM Says:
  May 5th, 2011 at

  If you checkout the YUI.dom implementation they go with this. Saves having to run checks each time the function is called.

  var getText = (document.documentElement.textContent !== undefined)
  ? function(elem) { // textContent Implementation here }
  : function(elem) { // innerText Implementation here }