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
Kevin Lozandier
Courses Plus Student 53,747 PointsWhy is innerText used instead of createTextNode() to insert new text to elements?
Why is innerText used instead of createTextNode() to insert new text to elements?
createTextNode is part of the standard DOM API specification while innerText is not towards setting text values for element nodes.
Furthermore, it aligns with what's already been done throughout the course thus far to use it:
let editButtion = document.querySelector('#editButton');
let textForEditActions = document.createTextNode('Edit');
editButton.appendChild(textForEditActions);
// ES6 JavaScript is being used to write this code snippet, the use of `let` instead of `var` is not accidental
6 Answers
Robert Bojor
Courses Plus Student 29,439 PointsHi Kevin,
I haven't done this course yet but I believe that he is using innerText because the actual text node inside the element is already created. Judging by the W3 documentation about createTextNode, the method creates a new text node, it is used in tandem with createElement in order to populate its text.
By using the innerText method you will shave off one line of code, editButton.appendChild(textForEditActions);, which will not be needed anymore.
Kevin Lozandier
Courses Plus Student 53,747 PointsAs far as I know, unless it happened recently, innerText() isn't part of the W3C DOM. For that reason browsers like Firefox haven't considered adopting it for some time.
Because of the additional lines you would have to write to check if it even exists, wouldn't it be simpler to use createTextNode?
Finally, isn't understanding the concept of nodes an essential part of having a fundamental understanding of the DOM? Even the understanding of nodeList, HTMLCollection, and a normal Array instance I think could have been addressed since the former two are array-like but deviate from regular arrays in significant ways to at least note.
It's a common barrier to traversing and manipulating the DOM correctly, and why many have used libraries like jQuery without hesitation since the library allows them to think functionally.
The lack of an understanding of nodes is a common reason why people don't bother to manipulate and traverse the DOM directly, and such people use libraries such as jQuery for this reason ( in addition to browser incompatibilities they havn't had time to sort out the severity of such a thing because they don't understand nodes and DOM traversal in the first place).
christephens
9,470 PointsI really hope you guys didn't learn all the above from just these videos. Here I was thinking I learned a whole bunch :)
Andrew Chalkley
Treehouse Guest TeacherHey Kevin,
I think creating "text node" is confusing when we've been talking about nodes as elements not the other node types. For those who are interested in the different types of nodes here's a link on the Mozilla documentation.
In the video I talk about innerText and I'm talking about properties so I thought it would be appropriate to do all the modification and property setting in one place.
Regards
Andrew
Kevin Lozandier
Courses Plus Student 53,747 PointsI also forgot to mention this, but also related to this course. Shouldn't documentFragment have been used for each todo item being added to the parentNode (li).
As far as I know, I thought it's critical for performance the moment you do more than `1-2 nodes to an element for performance reasons.
kevinardo
Treehouse Project ReviewerThanks Kevin! Reading this (because i couldn't get my label text to show up after adding content) lead me to use .textContent = "string" instead.
Sucker for Firefox :)
Edit: Totally missed that it is pointed to in the teachers notes :P
Kevin Lozandier
Courses Plus Student 53,747 PointsKevin Lozandier
Courses Plus Student 53,747 PointsThe edit button was newly created, I should have mentioned that. The W3C DOM allows you to delete text nodes you've already referenced without deleting the other text part of the element as long as you don't use
normalizeorinnerHTML.Kevin Lozandier
Courses Plus Student 53,747 PointsKevin Lozandier
Courses Plus Student 53,747 PointsWith text nodes you can keep reference of them to selectively delete text from an element without deleting the other text that make up that object. This isn't too much different than making sure you don't use anonymous functions for event listeners.
Also, it's rare for a newly created button to not be without text, whether that's a new text node or a string of text assigned to
aria-label,.Kevin Lozandier
Courses Plus Student 53,747 PointsKevin Lozandier
Courses Plus Student 53,747 PointsWith text nodes you can keep reference of them to selectively delete text from an element without deleting the other text that make up that object. This isn't too much different than making sure you don't use anonymous functions for event listeners.
Also, it's rare for a newly created button to not be without text, whether that's a new text node or a string of text assigned to
aria-label,.