Demystifying .innerText vs. .textContent
Tags: javascript, beginners, programming, webdev
Published: 2022-11-17 22:05:29

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. 
![HTML and JavaScript code with innerText and textContent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hfbfiw1isnry52gp9ul.png)

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. 
![result when using textContent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xot5aab3b6hswlaimk1p.png)

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.
![result when using innerText](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dx1yefnoxi8jfvb969wj.png)

**innerText** returns what is rendered to the page, as it appears to the human eye. 
![text rendered to the page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5icnlirxtudu05dtrzk6.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycsya95zf8l6cqdgwobz.png)
**textContent** renders the text in a single line: 
![textContent rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxvtvirdx3l08ounmswx.png)


Alternatively, seen in the code below, **innerText** is used to render the address to the DOM.  
![innerText](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p46itetqxngicqcw06xk.png)
**innerText** preserves the multi-line formatting: 
![innerText rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5dlr32mqbx65u62l800.png)


## 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.