innerText

innerText is a DOM property of Element that represents the text that is rendered and visible to the user within an element. It differs from textContent, which returns all text nodes in the subtree regardless of styling or visibility. innerText takes CSS and layout into account; text hidden via display:none, visibility:hidden, overflow, or white-space rules is typically omitted. It also normalizes whitespace and inserts line breaks in a way that matches how the text appears on the page. Reading innerText may trigger a reflow, since the browser must compute what is actually visible.

Because innerText is layout-sensitive, its value can vary between environments and over time as styles or content change. It is a read-write property: getting innerText returns the visible text; setting innerText replaces the element's contents with the provided string.

By contrast, textContent returns the textual content of the element regardless of CSS and is generally faster and more predictable for non-rendered text processing. It does not trigger reflow when read and does not reflect visibility changes until the DOM changes.

Usage notes: Use innerText when you need user-visible content or when you want to update text as a user would see it. Use textContent when you want to obtain or replace all text nodes without rendering considerations. Be mindful of whitespace and cross-browser differences.

See also: textContent, CSS display, reflow.