InnerText v InnerHTML
I know I won’t be the first to say that Javascript can be confusing at times. It is a programming language that is old enough to buy a beer. It also can be extremely finicky at times and lax at other times. After learning Ruby, this language can be a bit of a headache to write in. InnerText and innerHTML seem pretty straight forward at first glance. But as we dive a bit deeper, we will see the applicable times for both.
Innertext creates the text content as plain text of the specified node, inner HTML gets and sets the plain text or HTML contents in the elements. InnerHTML lets you work with HTML elements. This means as you are adding content to you page in Javascript with innerHTML, this allows you to edit HTML properties. Here I will show you a good example of the two.
As we can see, innertext will not look at what content is rendering. On the other hand, innerHTML will see that we are adding properties to our content. This allows the user to write HTML rich content. We can see that it is looking at the css properties I have programmed, and it will also allow the creation of tags which can come in handy if you want to build off of a function.
More times than not, using innerHTML would be the right call. This will allow us to keep fonts and styling consistent while also adding all the great features that comes with HTML content. I hope this settles the debate when you are deciding “Should I use innerHTML or innertext?”.
