Languages
[Edit]
EN

JavaScript - textContent vs innerText

0 points
Created by:
nickkk0
647

In this article, we would like to show you textContent and innerText differences in JavaScript.

textContentinnerText
became standard earlier than innerTextinitially was not standard
returns the full text of the node (Example 1)returns only the visible (rendered) text contained in a node (Example 1)
ignores <br> elementsturns <br> elements into newline characters (\n)
is the only one available for text nodes (Example 2)is defined only for HTMLElement objects
was unavailable in IE8 and earlieris heavier than textContent in terms of performance (requires layout information to determine how the text is being presented to the user)

More differences

Edit
  • There's a difference in behavior between the textContent and innerText when you change the text-transform  CSS property of an element. (Example 3)

Practical examples

Edit

Example 1

Edit

In this example, we create a div element with some text and a hidden span to show the difference in values returned by textContent and innerText.

Example 2

Edit

Only the textContent is available for text nodes, innerText returns undefined.

Example 3

Edit

In this example, we change the div element's text-transform style to show the difference in values returned by textContent and innerText.

References

Edit
  1. Node.textContent - Web APIs | MDN
  2. HTMLElement.innerText - Web APIs | MDN

Alternative titles

  1. JavaScript - difference between textContent and innerText
  2. JavaScript - textContent and innerText differences
1
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join