When working with the DOM (Document Object Model) in JavaScript, you often need to read or change the content of HTML elements.

But wait... there are three similar-sounding properties:

• innerText

• innerHTML

• textContent

They may look the same, but they behave differently in important ways. Let’s break them down with examples and a fun analogy. 🚀

---

🎯 1. element.innerText

✅ What it does:

innerText returns the visible text content of an element — what a user actually sees on the screen. It ignores hidden elements (like those with display: none) and respects CSS styles (like text-transform).

🔧 Example:

<div id="box1">Hello <span style="display:none">World</span></div>

<script>
  const box1 = document.getElementById("box1");
  console.log(box1.innerText); // Output: Hello
</script>

Since the <span> is hidden, innerText ignores it.

🎯 2. element.innerHTML

✅ What it does:

innerHTML returns the HTML code (tags + content) inside the element. You can also set it to insert new HTML.

🔧 Example:

<div id="box2">Hello <b>World</b></div>

<script>
  const box2 = document.getElementById("box2");
  console.log(box2.innerHTML); // Output: Hello <b>World</b>
</script>

You get the HTML structure, not just the text.

🎯 3. element.textContent

✅ What it does:

textContent returns the raw text inside the element — even hidden text. It doesn't care about CSS or visibility.

🔧 Example:

<div id="box3">Hello <span style="display:none">World</span></div>

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

🎓 When to Use What?

✅ Use innerText → When you care about what’s visible to the user.

✅ Use innerHTML → When you want to read or write HTML code.

✅ Use textContent → When you want to get all the text, no matter if it’s hidden.

video to understand clearly

video

#💡 Pro Tip: Avoid using innerHTML with user input to prevent XSS (Cross-site scripting) attacks.

I hope this blog post helped you clearly understand the differences between innerText, innerHTML, and textContent.