DEV Community

Mohana Naga Venkat Sayempu
Mohana Naga Venkat Sayempu

Posted on

19 2

textContent VS innerText

I used to think that there is no difference between textContent and innerText. But today I came to know that there exist some important differences between them.

i) textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows human-readable elements.

Example:-
HTML

<p>
    some paragraph text
    <style>
      p {
        color: red;
      }
    </style>
</p>

JS

const p = document.querySelector('p');
console.log(p.textContent);
/* textContent returns the content inside style, script elements as well..Above statement logs:
  Some textSome Other Text

  p {
    color: red;
  }
*/
console.log(p.innerText);
/* innerText returns only human-readable elements. Above statement logs:
  Some textSome Other Text
*/

ii) textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of hidden elements.

Example:-
HTML

<style>
.special {
      display: none;
    }
</style>
<h1>Heading <span class="special">Special</span> </h1>
const h1 = document.querySelector('h1');
console.log(h1.textContent);
/* textContent is not aware of styles. So it returns entire content. Above statement logs:
Heading Special
*/
console.log(h1.innerText);
/* innerText is aware of css, doesn't return hidden content. Above statement logs:
Heading
*/

Happy Coding πŸ˜€

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (5)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt β€’

Another one is .textContent = '' is the fastest way to delete all children nodes.

Collapse
 
dance2die profile image
Sung M. Kim β€’

That's a nice tip~ Thank you, Pacharapol~

Collapse
 
mohananagavenkat profile image
Mohana Naga Venkat Sayempu β€’

Cool πŸ˜ƒ. Great to know that, Thanks 😊

Collapse
 
moshgo profile image
Moshe Goldstein β€’

Thank you. I came across these two options in my bootcamp, and they recommended finding a blog that explains it. You've done a great job.

Collapse
 
monikavogler profile image
MonikaVogler β€’

What is the difference between innerText and outerText? Kauri Kamakhya Tantrik

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay