Difference Between innerText, textContent, and innerHTML

innetText Retrieves or sets the visible text of an element, ignoring any hidden content. It only includes text that is shown to the user.

·

3 min read

When working with web pages in JavaScript, you often need to get or change the content of elements. There are three main properties you can use: innerText, textContent, and innerHTML. Each one behaves differently, so let’s look at what they do and how they’re different.

1. innerText

  • What it does: Retrieves or sets the visible text of an element, ignoring any hidden content.

  • Key Point: It only includes text that is shown to the user (ignores elements with display: none or visibility: hidden).

  • Use it when: You want to get or change the text that is actually visible on the page.

<div id="example">
  <p>Hello <span style="display:none;">World</span>!</p>
</div>

<script>
  const element = document.getElementById('example');
  console.log(element.innerText);  // Output: "Hello !"
</script>

2. textContent

  • What it does: Retrieves or sets all the text inside an element, including text from hidden elements, but without any HTML tags.

  • Key Point: It gives you all the text, even if some of it is hidden (e.g., display: none elements).

  • Does not trigger reflow: Since it does not involve recalculating the page layout, textContent is faster than innerText.

  • Use it when: You want to get or change all the text, regardless of whether it's visible or hidden, and you don’t care about HTML tags.

<div id="example">
  <p>Hello <span style="display:none;">World</span>!</p>
</div>

<script>
  const element = document.getElementById('example');
  console.log(element.textContent);  // Output: "Hello World!"
</script>

3. innerHTML

  • What it does: Retrieves or sets the HTML content of an element, including both text and HTML tags.

  • Key Point: It includes everything inside the element—text and HTML tags.

  • Modifies HTML structure: You can set innerHTML to update or replace the entire content of an element, including adding new HTML tags or structures.

  • Potential security risks: Setting innerHTML from untrusted sources can expose your application to Cross-Site Scripting (XSS) attacks, so you need to sanitize inputs.

  • Use it when: You want to get or change the entire HTML structure, not just the text.

<div id="example">
  <p>Hello <span>World</span>!</p>
</div>

<script>
  const element = document.getElementById('example');
  console.log(element.innerHTML);  
  // Output: "<p>Hello <span>World</span>!</p>"
</script>

Quick Comparision

PropertyIncludes HTML Text?Includes HTML Tags?When to Use it
innerTextNoNoFor Visible text only
textContentYesNoFor all text, hidden or visible
innerHTMLYesYesFor Full HTML, including tags

Summary:

  • Use innerText for visible text.

  • Use textContent for all text, including hidden content.

  • Use innerHTML to access or modify the entire HTML, including tags and structure.

Sounds too complicated? Read the Simplified Versions

Read more about React & JavaScript

Follow me for more such content

Did you find this article valuable?

Support Jay Tillu by becoming a sponsor. Any amount is appreciated!