Difference Between innerHTML, textContent, and innerText

When manipulating the Document Object Model (DOM) in JavaScript, innerHTML, textContent, and innerText are three primary properties used to read or modify the contents of an HTML element. While they may appear similar at first glance, they handle HTML parsing, styling rules, hidden elements, and performance in fundamentally different ways. Understanding these differences is essential for writing secure, performant, and bug-free JavaScript code.

1. innerHTML

The innerHTML property gets or sets the HTML or XML markup contained within an element.

• HTML Parsing: When setting innerHTML, the browser parses the provided string into actual DOM nodes. When reading it, it returns the complete HTML markup (including child tags) as a string.
• Security Risk (XSS): Inserting unsanitized user input via innerHTML creates a major Cross-Site Scripting (XSS) vulnerability, allowing malicious scripts to execute.
• Performance: Because it forces the browser’s HTML parser to run, modifying innerHTML is more resource-intensive than updating plain text.

Example:

const element = document.getElementById('example');
element.innerHTML = '<strong>Hello World!</strong>';
// Result: Renders "Hello World!" in bold text.

2. textContent

The textContent property gets or sets the raw text content of a node and all of its descendants.

• No HTML Parsing: Any HTML tags passed to textContent are treated as literal text and rendered as plain characters rather than parsed elements.
• Includes Hidden Text: It retrieves the text of all elements, including <script> and <style> elements, as well as elements hidden via CSS (display: none or visibility: hidden).
• Performance & Safety: It is the fastest option because it does not trigger HTML parsing or calculate layout reflows. It is also completely safe from XSS attacks when inserting user input.

Example:

const element = document.getElementById('example');
element.textContent = '<strong>Hello World!</strong>';
// Result: Displays the literal string "<strong>Hello World!</strong>" on the page.

3. innerText

The innerText property represents the “rendered” text content of a node, mimicking what a user actually sees in the browser.

• CSS & Layout Aware: innerText accounts for CSS styles. It does not return text from elements hidden with display: none, and it normalizes spacing and line breaks according to how the text visually appears on the screen.
• Reflow Overhead: Because it must take layout and CSS rules into account, reading innerText triggers a layout calculation (reflow), making it computationally slower than textContent.
• No HTML Parsing: Like textContent, assigning a string to innerText inserts literal text rather than parsed HTML.

Quick Comparison

When to Use Which

• Use innerHTML only when you need to insert or update actual HTML elements and you are confident the data source is secure.
• Use textContent as the default choice for reading or updating plain text due to its superior performance and security.
• Use innerText only when you specifically need the text as it is visually rendered to the user, respecting CSS visibility and spacing.