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

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Posted by Ken Alger
Ken Alger
Treehouse Teacher

innerText

Mr. Chalkley describes some of the differences between innerText and innerHTML. After a bit of frustration with my code not working in Firefox, I discovered that Firefox does not support innerText. So, for the project I used innerHTML and/or textContent in it's place.

I know there is a jQuery way around this, but to utilize strictly JavaScript what is the best method to satisfy all browsers?

3 Answers

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Hey Ken,

Thanks for pointing this out. I've included some fairly straightforward cross-browser code below with some comments explaining what's going on.

  //check if innerText is undefined
  if (typeof editButton.innerText === "undefined")  {
    //if it is undefined use textContent
    editButton.textContent = "Edit";
  } else {
    //else use innerText
    editButton.innerText = "Edit";
  }

You can see why you'd want to use jQuery for a lot of this stuff. The difference between writing JavaScript in the browser and other environments like in Node.js or the other examples I shared, is that browsers don't always agree. Generally when an API is defined there won't be much of this branching code, but in the browser you could be doing it quite a bit.

Regards,
Andrew

Keith Barlow
Keith Barlow
5,114 Points
Keith Barlow
Keith Barlow
5,114 Points

? So why don't you add this to the tutorial? Do you have any idea how much of peoples time you waste?

And also edit out your Umms and arrs and also when you make typos????

OK Cool!

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

Try using textContent Also, here's a post on stack that should help explain it: http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Ken,

There is a nice explanation as to why Firefox doesn't use innerText on the MDN, essentially is comes down to web standards as mentioned in the Stack Overflow thread.

https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent#Differences_from_innerText