JS DOM: innerHTML, textContent, innerText, nodeValue

By Xah Lee. Date: 2015-03-13. Last updated: 2026-07-27.

innerHTML

innerHTML is meant to be HTML code.

// change text content of first p tag
document.getElementsByTagName("p")[0].innerHTML = "<b>water</b>";
// the word is shown as bold

2026-07-26

textContent vs innerText

What is the difference between textContent and innerText

ai answer

textContent and innerText both get/set the text of a DOM node (ignoring HTML tags), but they differ significantly in what they include, how they handle styling/visibility, performance, and scope.

Key Differences

Aspect	`textContent` (Node)	`innerText` (HTMLElement)
What it returns	All text content of the node and its descendants, including hidden text, `<script>`, `<style>`, comments ignored, raw whitespace/line breaks from the markup	Approx. the rendered/visible text a user would see (or get by selecting + copying). Ignores hidden elements, normalizes whitespace, respects `<br>`, and applies some CSS text transformations
CSS / visibility	Completely ignores CSS and layout. Includes `display: none`, `visibility: hidden`, etc.	Aware of CSS styling and computed styles. Skips non-rendered/"human-readable" content
Performance	Fast — no layout/reflow needed	Slower — reading it can trigger a reflow to get up-to-date styles
Availability	All `Node` types	Only `HTMLElement`s
Setting value	Replaces all children with a single text node	Same, but converts line breaks into `<br>` elements
Standardization	Long-standing DOM standard	Originally non-standard (IE); later standardized

Practical Example

<div id="demo">
  <style>p { color: red; }</style>
  Visible text.
  <span style="display: none">Hidden text</span>
  <br>
  More text.
</div>

element.textContent → roughly "p { color: red; } Visible text. Hidden text More text." (includes style content + hidden text + original whitespace)
element.innerText → roughly "Visible text.\nMore text." (only visible rendered text, with line break from <br>)

When to Use Which

Prefer textContent in most cases: getting/setting raw text, better performance, no reflow, works on any node, safer for data extraction (no surprise CSS effects). It’s the modern default recommendation.
Use innerText when you specifically need the visible/rendered text as a user would experience it (e.g., accessibility checks, clipboard-like behavior, or UI testing that must ignore hidden content).

Note: Neither parses HTML (unlike innerHTML). Setting either one removes existing child nodes. Both are widely supported in modern browsers.

nodeValue

nodeValue is for setting content of text node only. [see get Node Name (Element Tag Name), Node Type, Node Value]
It is particularly useful when working with XML, such as SVG. [see Practical SVG Tutorial]

The most compatible and standard way of setting text content is first to get the element's content as a text node, then set nodeValue, like this:

node.firstChild.nodeValue = text

But, if a element's content is empty, it doesn't have any child (thus no text node), so you need to check if element has firstChild first.

const f_addTextNode = (xel, xtext) => {
 while (xel.firstChild) xel.removeChild(xel.firstChild);
 xel.appendChild(document.createTextNode(xtext));
};

f_addTextNode(document.getElementsByTagName("p")[0], "good");

History

nodeValue is in web standard since 1990s.
innerHTML is originally from Microsoft Internet Explorer. Is made into standard, supported by all browsers back to 2010.
innerText is originally from Microsoft Internet Explorer, but is now in html spec. It's not supported by Firefox as of 2015-03-13.
textContent is in standard's spec around 2011, and is supported by browsers since about 2013.