Difference Between innerText, textContent, and innerHTML

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

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

• Pass by Value & Pass by Reference - Simplified

• JavaScript Code Execution - Simplified

• React Element - Simplified

Read more about React & JavaScript

• Understanding Callbacks in JavaScript

• Call Stack in JavaScript

• What is React

• Datatypes in JavaScript

• Variables in JavaScript

• Scope in JavaScript

• Hoisting in JavaScript

• Working of JavaScript

Follow me for more such content

• My YouTube Channel

• My Site

• My Blogs

• LinkedIn

• Instagram

• Twitter

• Stackoverflow

• Github

• Dev

• Medium

• My YouTube Channel