innerText vs innerHTML vs textContent: What’s the Real Difference?

Hey everyone!
If you’re working with JavaScript and trying to get or change content inside HTML elements, you’ve probably come across these three:
innerText, innerHTML, and textContent.

They might look similar — but they work differently!
Let’s go through them one by one with simple examples so you can see exactly what each one does.

1. innerText

innerText gives you the text you can actually see on the screen. It hides anything that’s not visible (like elements with display: none) and respects line breaks and formatting.

html

Hello Hidden World

js

const result = document.getElementById("demo1").innerText;
console.log(result); // Output: "Hello World"

1. innerHTML

innerHTML gives you everything inside an element — not just the text, but also the HTML tags.

html

Hello World

js

const result = document.getElementById("demo2").innerHTML;
console.log(result); // Output: "Hello World"

1. textContent

textContent gives you all the text, even from elements that are hidden — but it doesn’t include any HTML tags.

html

Hello Hidden World

js

const result = document.getElementById("demo3").textContent;
console.log(result); // Output: "Hello Hidden World"
Which One Should You Use?

Use innerText if you want only what’s visible on the page.
Use innerHTML if you need to get or set HTML code.
Use textContent if you want plain text, including what’s hidden.
That’s All!