Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Modifying Elements

Sean T. Unwin
Sean T. Unwin
28,690 Points

Interactive Web Pages with JavaScript Course: Tip for making it more cross-browser compatible

The use of innerText is not compatible with Firefox.

I would suggest that in instances where this is used in the videos to use textContent. This would allow for more cross-browser compatibility, at least for modern browsers.

For Internet Explorer versions 8 and below, you could use firstChild.nodeValue. This works in all browsers. Some may say that dealing directly with nodes can be confusing to some, although in this instance I don't think that is the case.

textContent informaton on MDN


View an example on Codepen based on a question from this forum.


Any thoughts are appreciated, especially if Andrew Chalkley would have any input on this regarding the course.

Since innerText works on IE8, and just about everything else supports textContent, I guess you could add it to the element prototype where it doesn't exist: http://stackoverflow.com/a/18063663

They're technically not directly interchangeable and have some slight differences, but no more than you would need to deal with trying to juggle separate functions/methods for each browser every time you want to use them...

Sean T. Unwin
Sean T. Unwin
28,690 Points

Thanks for your comment, Iain, and also thanks for the link. Good stuff.

I understand what you're saying and it is a really good option, although, I think it is in a little bit of a different direction than what I was trying to convey. My primary concern is for people using Firefox, as opposed to Chrome, as their primary browser. I don't think anyone here would be using anything less than IE9. I realize that I mentioned IE in my post, but that was more of an aside with a justification for using the fallback option of firstChild.nodeValue if needed, which it probably wouldn't be in terms of the courses and workshops here. I was simply stating that using that is available in practically any browser regardless of how old they may be since it's been a spec for ages and likely will be going forward.

The issue I was trying to raise, and to assist others with, is that innerText is not an implemented standard - it was spawned by the MSIE team and some browsers included it because of market share, I suppose, although I am speculating on that.

Therefore, the main point I am attempting to achieve is to raise awareness to those that use Firefox, as it does have a significant user-base and their team is trying to follow standards laid out by the W3C and whatwg, so they may be wondering why some aspects of their JavaScript may not perform as intended or perhaps get errors they do not understand. Now, of course, I am in no way intending to besmirch Andrew - he's awesome and so are his courses. :)

1 Answer

Matteo Mainardi
Matteo Mainardi
7,372 Points

hi Sean T. Unwin, i think that using firstChild.nodeValue could be troublesome if you make changes to the html code like adding children tags before text, forcing you to make a lot editing. using the property it's probably safer, but I've zero experience, so it's just a thought.

in this case, to assure compatibility with <=IE8, you could do something like:

var editText = function(element_to_edit, text) {
  if (Node.innerText) {
    element_to_edit.innerText= text;}
  else {
    element_to_edit.textContent= text;}
}

var getElemText = function(element) {
  if (Node.innerText) {
    return element.innerText ;}
  else {
    return element.textContent ;}
}

editText(editButton,"Edit");

editInput.value = getElemText(label);
Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi Matteo Mainardi,

Thanks for commenting; I apprectiate your input.

In regards to using firstChild, if we are simply replacing all text this shouldn't be an issue. If we are being more particular then I could see that possibly being an issue although I would tend to view that as a use-case outside the scope of the subject of simple text replacement here.

Furthermore, firstChild.nodeValue essentially does the same thing as innerText so if we were wanting to replace text further down the chain, such as firstChild.firstChild, then innerText will not necessarily work in that regard either.

Suposing there were multiple children we could cycle through them with a loop using the childNodes array or target them specifically, e.g. elem.childNodes[1].nodeValue, for example.

As with almost anything in programming there is more than one way to write code to accomplish the same task and with that in mind I am glad you posted another example. I believe both our examples gets the same result in <=IE8, but as I understand it innerText is slower than nodeValue with IE6/7, but I am not absolute in that regard.

Cheers. :)