TextContent vs innerHTML vs innerText in JavaScript: Key Differences

In JavaScript, textContent gets or sets the text inside an element without parsing HTML, innerHTML gets or sets the HTML markup inside an element, and innerText gets or sets the visible text considering CSS styles. Use textContent for plain text, innerHTML for HTML content, and innerText when you want rendered text as seen by the user.

Quick Comparison

Here is a quick table comparing textContent, innerHTML, and innerText on key factors.

Property	Returns HTML?	Includes Hidden Text?	Performance	Use Case
textContent	No, returns plain text	Yes, includes hidden text	Fastest	Get/set raw text content
innerHTML	Yes, returns HTML markup	Yes, includes hidden text	Slower	Get/set HTML content
innerText	No, returns visible text only	No, excludes hidden text	Slower	Get/set visible rendered text

Key Differences

textContent returns all the text inside an element exactly as it appears in the DOM, including text in hidden elements. It does not parse or return any HTML tags, making it fast and safe for plain text extraction or insertion.

innerHTML returns the HTML markup inside an element as a string, including tags and nested elements. Setting innerHTML parses the string as HTML, which can change the DOM structure and may introduce security risks if used with untrusted content.

innerText returns the visible text as rendered on the page, respecting CSS styles like display:none or visibility:hidden. It triggers a reflow to compute styles, so it is slower. It is useful when you want the text exactly as the user sees it.

Code Comparison

javascript

const element = document.createElement('div');
element.innerHTML = '<p>Hello <span style="display:none">hidden</span> World!</p>';

console.log('textContent:', element.textContent);
// Output: Hello hidden World!

console.log('innerHTML:', element.innerHTML);
// Output: <p>Hello <span style="display:none">hidden</span> World!</p>

Output

textContent: Hello hidden World!
innerHTML: <p>Hello <span style="display:none">hidden</span> World!</p>

innerText Equivalent

javascript

const element = document.createElement('div');
element.innerHTML = '<p>Hello <span style="display:none">hidden</span> World!</p>';

console.log('innerText:', element.innerText);
// Output: Hello  World!

Output

innerText: Hello  World!

When to Use Which

Choose textContent when you want to get or set plain text quickly without any HTML parsing or rendering concerns. It is best for manipulating raw text content safely.

Use innerHTML when you need to work with HTML markup inside elements, such as inserting formatted content or reading the full HTML structure.

Pick innerText when you want the text exactly as the user sees it on the page, excluding hidden elements, but be aware it is slower due to style calculations.

Key Takeaways

textContent is fastest and returns all text including hidden elements without HTML tags.

innerHTML returns or sets HTML markup and can change the DOM structure.

innerText returns visible text only, respecting CSS, but is slower due to rendering.

Use textContent for plain text, innerHTML for HTML content, and innerText for visible text as seen by users.