Tidbit 03: innerText vs textContent in JavaScript – Not Twins, Just Cousins!

In JavaScript DOM, both innerText and textContent seem to give you the text inside an HTML element. But under the hood, they work quite differently.

Let’s explore what they are, how they differ, and when to use which—with real-world examples!

The textContent — The Raw Texter

• Returns all the text in the element, including hidden elements.
• Ignores CSS and layout.
• Faster because there are no layout calculations.
• Great for getting raw data or sanitizing content.

Let's create a hidden text on the UI:

<div id="info">
  Hello <span style="display:none">World</span>
</div>

Now, if you use the textContent property:

document.getElementById("info").textContent;
// Output: "Hello World"

You will get "Hello World" even though “World” is hidden.

Use textContent when you need all content, regardless of visibility.

The innerText — The Visible Speaker

• Returns only the visible (rendered) text.
• Respects CSS like display: none, visibility: hidden, etc.
• Slower (causes layout reflow).
• Ideal for mimicking what users actually see on screen.

For, the same HTML above, if you use the innerText:

document.getElementById("info").innerText;
// Output: "Hello"

You will only get the “Hello”. The hidden “World” is ignored.

Use innerText when you want screen-accurate content (what the user sees).

You can learn about DOM Manipulations in JavaScript with examples and projects from this session.

Final Thoughts

Often developers use the innerText and textContent interchangibly without understanding their real purposes. Please note:

• If you’re reading or saving data, go for textContent.
• If you’re testing, displaying, or analyzing visible UI, use innerText.
• They’re not interchangeable—choose wisely based on context!

Join 40 Days of JavaScript for FREE

There are 101 ways of learning something. But, nothing can beat the “structured” and “progressive” learning methodologies. I have designed this FREE task-based Course for you to stay structured and motivated. Sounds great? Please take a look:

Join 40 Days of JavaScript Course for FREE - Do not miss the chance to learn JavaScript in-depth with practical projects and assignments. JavaScript is omnipresent and learning the language well will help you get a better grip on many other libraries and frameworks like ReactJS, Angular, Next.js, Node.js, Remix, and many more. So, make sure to join the 40 Days of JavaScript initiative and master the language.