innerHTML vs textContent in JavaScript

Introduction

In this tutorial, you will learn the concept of innerHTML vs textContent.

They are used to get or set content inside an element, but they work very differently.

What is innerHTML?

innerHTML gets or sets the HTML content inside an element.

Example

<div id="container"></div>
<script>
  document.getElementById("container").innerHTML = "<b>Hello World</b>";
</script>

Output:

Note: The text will appear bold because the <b> tag is parsed as HTML.

Important Points of innerHTML

1. It reads HTML markup.

2. It can insert a full HTML structure.

3. It is slower than textContent.

4. It can cause security risks (XSS).

What is textContent?

textContent gets or sets only the text inside an element.

Note: It does NOT parse HTML tags.

Example:

<div id="container"></div>
<script>
  document.getElementById("container").textContent = "<b>Hello World</b>";
</script>

Output:

Note: The tags are shown as plain text.

Important Points of textContent

1. It returns only text.

2. It does NOT parse HTML.

3. It is faster than innerHTML.

4. It is safe from XSS injection.

5. It is recommended for plain text.

innerHTML vs textContent

Feature	innerHTML	textContent
Reads HTML Tags	Yes	No
Parses Markup	Yes	No
Performance	Slower	Faster
Security Risk	High (XSS possible)	Safe
Best For	Adding HTML content	Adding plain text

Security Warning

If you use innerHTML with user input, then it can cause XSS (Cross-Site Scripting) attacks.

Wrong way Example:

const userInput = "<img src=x onerror=alert('Hacked!')>";
element.innerHTML = userInput;

Note: This can execute malicious JavaScript.

Safe Way Example:

const userInput = "<img src=x onerror=alert('Hacked!')>";
element.textContent = userInput;

Note: Always prefer textContent when inserting user-generated data.

Performance Comparison

1.  textContent is faster than innerHTML because it does not parse HTML.
2. In large applications, textContent improves performance.

When Should You Use innerHTML or textContent?

Use innerHTML:

1. When you need to insert HTML elements.
2. When you are building dynamic templates.
3. When you control the content source.

Use textContent:

1. When you are inserting user data.
2. When you want better performance.
3. When you want security.

Real-Life Example: Updating a Notification Message

You will see a real-world use of innerHTML and textContent, showing notifications or messages on a website.

For example, when a user clicks a button, the website may display a success message.

HTML:

<p id="message"></p>
<button onclick="showMessage()">Show Message</button>

JavaScript using innerHTML

function showMessage() {
  document.getElementById("message").innerHTML = "<strong>Success!</strong> Your form has been submitted.";
}

Output:

Note: Success will show as bold because innerHTML supports HTML tags.

JavaScript using textContent

function showMessage() {
  document.getElementById("message").textContent = "<strong>Success!</strong> Your form has been submitted.";
}

Output:

Note: This happens because textContent does not interpret HTML tags.

Interview Questions

Conclusion

Both innerHTML and textContent are important properties, and It is used to update content in the DOM.

innerHTML: It is used to insert and read HTML content.

textContent: It works plain text only and is generally safer.

In most cases, developers prefer textContent when they only need to update text because it is faster and more secure. However, innerHTML is useful when you need to dynamically add HTML elements.