The DOM field guide / 001

Same element.
Different text.

Two properties that look interchangeable—until layout, hidden content, and line breaks enter the picture. Explore what your browser actually returns.

innerText

Text informed by rendering. Available on HTML elements.

textContent

Text from the DOM tree. Available on every Node, though some node types return null.

01

Layout can become a line break

An absolutely positioned span is blockified by CSS. Compare it with inline and block positioning to see how rendering affects innerText. The readouts use JSON notation: \n means a newline character.

textContent concatenates descendant text. innerText can introduce line breaks based on layout—even when the dots appear next to the words.

02

Hidden text is still in the DOM

The hidden attribute normally gives an element display: none. Read a visible parent containing a hidden span, then reveal the span and compare again.

For a rendered parent, innerText excludes descendants hidden with display: none. If the element you read is itself not rendered, innerText falls back to descendant text content; it is not a universal visibility filter.

03

Whitespace has two versions

These words contain three spaces and a literal newline in the HTML source. Change white-space to compare the rendered text with the original text nodes.

CSS changes what innerText returns here. The underlying text nodes—and therefore textContent—stay the same.

04

Write plain text deliberately

Both setters replace an element’s children. A key difference: innerText converts newline characters into line-break elements, while textContent inserts a text node. Neither parses the input as HTML.

Use textContent for plain DOM text. Use innerText when you specifically need rendering-aware text. Avoid innerHTML when your intent is to insert plain text.