Difference between textContent vs innerText

javascript

prompt-engineering

performance

best-practices

byNikita Barsukov·Jan 13, 2025

textContent retrieves all text within a node, including script and style content, ignoring styling. innerText considers styles, thus ignoring scripts, styles, and hidden text and it updates layout when accessed, potentially impacting performance.

Here's a quick example:

// <div id="example"><script>//Secret squirrel business...</script>Visible text</div>

var elem = document.getElementById('example');

console.log(elem.textContent); // "Secret squirrel business...Visible text"
console.log(elem.innerText);   // "Just the visible text"

textContent is fast and efficient, while innerText is style-conscious.

Detailed Differences

Speed and Efficiency

When it’s a race for speed, textContent wins. innerText causes a reflow - the browser's way of recalculating page layout. This can slow down performance, particularly with large documents or frequent dynamic content changes.

Universal Support vs Selective Support

textContent is the universal soldier being supported across all node types and modern browsers, whereas innerText only plays well with HTMLElement. For the antique browsers (Hello, IE8!), polyfills using nodeValue offer a fallback solution.

Depositing a Line Break and Layout Sensitive

innerText has an eye for style and layout. It interprets visual formatting like <br> tags and CSS display: none;, providing the straightforward, human-readable text. On the other hand, textContent wears layout blinders, returning the raw textual content inside an element.

Picking the Right Tool

Setting Element Text

If you have the mission of getting or setting content in both HTMLElement and non-HTMLElement nodes like text nodes, textContent is your go-to guy. It doesn't care if an element is hidden by CSS or not; it delivers the full text on demand.

Unearthing Large Textual Treasures

If you're dealing with a text mine of nodes, or frequent content updates, textContent should top your list of text extraction tools for better performance and less CPU usage.

Unraveling the Invisible

If your job involves invisible elements but you still need to access their text, textContent can sense the invisible and retrieve or modify the text irrespective of the visibility cloak.

Advanced Uses and Tricks

Creating New Text Nodes

If you’re crafting new text nodes using document.createTextNode(), textContent is an indispensable ally for smoothly embedding the created text within your document.

Reading Text Reflecting CSS Display

When your requirement is to obtain text as it's shown to the user, respecting CSS rules, then innerText is your ticket. It faithfully delivers only visible text as per the CSS styling on the page.

Pro Tips and Gotchas

Leveraging `Object.defineProperty` for `textContent`

To make textContent toe the line in all scenarios, particularly in data-binding or reactive UI frameworks, Object.defineProperty is a magic wand.

Making Accessibility a Priority

While both properties serve accessibility purposes, textContent may include hidden text which could confuse assistive technologies. But innerText plays safe by providing a text representation suited to the user's visual experience.

Add More to Your Toolkit

Expand your interpretative repertoire with resources like Kelly Norton's blogpost for a deep dive into the innerText and textContent comparison, or peruse perfectionkills.com for a table-wise breakdown.

explain-codes / Javascript / Difference between textContent vs innerText

Linked

Innertext vs innerHTML vs label vs text vs textContent vs outerText



How to append text to a div element?



How to get the pure text without HTML element using JavaScript?



How do I preserve line breaks when getting text from a textarea?



Contenteditable, Set Caret at the End of the Text (Cross-Browser)

