DEV Community

Cover image for Difference between innerText and textContent in HTML
Madhu Saini
Madhu Saini

Posted on

6 1 1 1 1

Difference between innerText and textContent in HTML

innerText

innerText retrieves or sets the text content of an element and all its descendants, and it is aware of the current styling applied to the elements. This means that if there are any styles applied to an element that hide it (like display: none), innerText will not return the text content of that element.

Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>innerText Example</title>
</head>
<body>
  <div id="exampleDiv">
    This is some <span style="display: none;">hidden</span> text.
  </div>

  <script>
    const div = document.getElementById('exampleDiv');
    console.log(div.innerText); // Output: This is some text.
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode


html

Image description

In this example, innerText returns only the visible text inside the #exampleDiv element, ignoring the hidden span.

textContent

textContent returns the text content of all elements, including hidden elements or those with visibility set to hidden. It doesn't consider CSS styling and simply returns all text contained within the specified element.

Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>textContent Example</title>
</head>
<body>
  <div id="exampleDiv">
    This is some <span style="display: none;">hidden</span> text.
  </div>

  <script>
    const div = document.getElementById('exampleDiv');
    console.log(div.textContent); // Output: This is some hidden text.
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

In this example, textContent returns all the text within #exampleDiv, including the text inside the hidden span.

Conclusion

  • Use innerText when you want to retrieve only the visible text content of an element, considering CSS styles.
  • Use textContent when you want to retrieve all text content within an element, regardless of CSS styling or visibility.

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
πŸŽ₯ Audio/video file upload with real-time preview
πŸ—£οΈ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
πŸ“€ Export interview's subtitles in VTT format

Read full post

Top comments (0)

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay