The Old NetISSUE #34 of 60

innerText vs textContent

Pixel PeteVSQuirks Mode

Pixel Pete saysinnerText respects styling/visibility; textContent returns all raw text — prefer textContent.

Both read/write text without parsing HTML (safe from XSS). textContent returns every text node, ignoring CSS — fast and predictable. innerText reflects what's visually rendered (skips hidden elements, collapses whitespace) — slower because it triggers layout. Default to textContent; reach for innerText only when you specifically need the rendered text.

Power-ups you unlock

Both set text without parsing HTML (XSS-safe)
textContent = all text, ignores CSS, fast
innerText = rendered text, triggers layout
Default to textContent

Quirks Mode attacks — common mistakes

Using innerText in loops (layout cost)
Expecting textContent to skip hidden elements
Reaching for innerHTML when text suffices

Boss battleSet text safely with textContent and compare to what innerText would return for hidden content.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><p id="x">old <span style="display:none">hidden</span></p>
<script>document.getElementById('x').textContent='safe new text';</script></body></html>

▶ Open the interactive comic issue

‹ InnerHTML · Setting Markup As A String CreateElement · CreateTextNode ›