Demystifying .innerText vs. .textContent

#javascript #beginners #programming #webdev

Learning JavaScript is a challenging feat. For me, one of the most mystifying parts of JavaScript was determining when to use innerText vs. textContent because both methods return the text contained within a DOM tree node. I was under the impression that innerText and textContent were interchangeable. However, this is not the case - rather, there are important differences between the two.

There are two objectives of this blog post:
1) Explain key differences between the innerText and textContent properties
2) demonstrate the occasions when each property should be called

.textContent

textContent returns the raw textual content inside the DOM node and its descendants, including script and style tags. textContent is aware of formatting such as spacing and line breaks.

🌟 TLDR: Use textContent when you want to see what's in the element including the relevant styling.

.innerText

innerText is aware of the rendered appearance of the text content of a node and its descendants. This means when using this property, innerText will only show human-readable elements (i.e., innerText will roughly return what you would get if you selected and copied the text on the page to the clipboard). Furthermore, innerText cannot access the contents of script or style tag elements.

🌟 TLDR: Use innerText when you only need to see what's in the element without the formatting.

Visual Explanation

I'm a visual learner, so I think the best way to understand the differences between innerText and textContent is through code examples.

Example #1
In the HTML code below, notice the indentation after the colon : and the "display: none" styling within the span element.

When using textContent, this method extracts the text from within the paragraph as it exists in the markup - the line break, indentation, and placeholder text are preserved.

On the other hand, when using innerText, the placeholder text is missing which means the "display: none" styling was taken into account, and there is no second line.

innerText returns what is rendered to the page, as it appears to the human eye.

Example #2
The use of innerText vs. textContent is also important when there is a multi-line string, such as a physical address.

In the code below, textContent is used to render the address to the DOM.

textContent renders the text in a single line:

Alternatively, seen in the code below, innerText is used to render the address to the DOM.

innerText preserves the multi-line formatting:

Conclusion

textContent and innerText methods have specific uses depending on what you want your code to accomplish. Keep in mind that innerText can introduce performance problems especially when used inside a loop or other iterative method, but these performance slowdowns are avoidable by using textContent.

There are a ton of other blog posts and videos also explaining the differences between innerText and textContent methods, but I hope this post provides an additional explanation between these two JavaScript methods.