Whether you are a beginner or an advanced programmer, you have surely come across the innerText, textContent, and innerHTML properties. Each property can help you change and manipulate your code. But how do you know which to use when they all perform similar operations?
Let's break it down:
InnerText will show only "human-readable" text. It will not return any styling or hidden elements.
TextContent returns any and all node elements.
InnerHTML allows you to grab the text within the string of the HTML markup, including any styling or script tags.
If that still sounds like they are basically doing the same thing, you wouldn't be wrong! They do perform similarly but have subtle differences.
Let's start out with making a simple div HTML tag and adding some content:
We have some text and some styling included. The strong tag will bold the word "are", and the em tag will italicize "differences." We also included 3 spaces between the words "the" and "differences."
Now, let's create a variable in JavaScript so that we can grab the content of our div.
Using innerText:
Recall from above that innerText will return text that is "human-readable".
Result:
The output of getInfo is all of the text. Notice how neither of the tags or the spacing shows up when we call getInfo.value.
You should use innerText when you just need to grab THE TEXT without the styling tags or other formatting (the random spaces, for example). Think of innerText as only, you guessed it, the inner text.
Side note: innerText is not supported in Internet Explorer 9 or earlier versions. Because innerText is aware of CSS styling, it also can decrease performance by triggering a reflow. A reflow is when a browser reevaluates page elements when a document is re-rendered. An example of a reflow would be when a browser window is resized.
Using textContent
TextContent will grab all of the text and return any styling or script tags and any other formatting.
Result:
Notice how textContent grabbed all of the text and the styling, including the spaces. If you want to see what is in the element, then you should use textContent.
Side note: textContent will perform better than innerText because it does not trigger a reflow since it is not aware of CSS styling. Also, because its value is not parsed as HTML, textContent can help prevent malicious attacks.
Using innerHTML:
InnerHTML will return all of the text, styling tags included, as it is typed in the HTML document.
Result:
What that means is that innerHTML does not change anything, it just returns all of the text as it is in the HTML document.
Side note: using innerHTML should be few and far between because it can be a target for malicious code to be inputted. As long as you are using your own code and not code from any third party, you should be fine using innerHTML, however, try opting for textContent instead.
Why would I need to use any of these?
There are a multitude of reasons to use innerText, textContent, or sometimes innerHTML.
As you can see, innerText, textContent, and innerHTML all do very similar things. They all grab the text within the element, but there are slight differences. To recap, innerText will grab strictly the inner text, which means it will grab all of the text that is "normal" to humans. A styling tag such as strong is not normal text to humans, and it will not show up when using innerText. TextContent will also grab all of the text and whatever styling you put in there. The styling tags will not show as text, but will be executed. Finally, innerHTML will grab everything and return it as it is, styling tags and weird spaces and all. But beware of the safety implications when using innerHTML, and try to avoid using it.
header photo source: https://www.goodcore.co.uk/blog/coding-vs-programming/
Top comments (0)