snippetjavascriptTip
How are HTMLElement.innerText and Node.textContent different?
Viewed 0 times
javascripttextcontentaredifferentandhowinnertextnodehtmlelement
Problem
JavaScript provides two properties you can use to access the text content of an element:
I think it's helpful to identify the similarities of these two properties before diving into the differences. This will also clarify how they're used in most cases.
Suppose you have an HTML element, containing some text:
Both of these properties will return the text content of the element, including the text content of any child elements. They will also ignore any HTML tags that may be present in the element's content. And, they can be used to set the text content of the element, too.
So far, these two properties appear to do the exact same thing. In fact, they both offer some convenient features that make them very useful. However, they start to exhibit some differences when the element's content is a little more complex.
Node.textContent and HTMLElement.innerText. For the most part, these two appear to be interchangeable. In fact, many developers use them interchangeably, not knowing that there are important differences between the two.I think it's helpful to identify the similarities of these two properties before diving into the differences. This will also clarify how they're used in most cases.
Suppose you have an HTML element, containing some text:
Both of these properties will return the text content of the element, including the text content of any child elements. They will also ignore any HTML tags that may be present in the element's content. And, they can be used to set the text content of the element, too.
So far, these two properties appear to do the exact same thing. In fact, they both offer some convenient features that make them very useful. However, they start to exhibit some differences when the element's content is a little more complex.
Solution
<p id="greeting">Hi there! My name is <strong>Bubbles</strong>.</p>Suppose you have an HTML element, containing some text:
Both of these properties will return the text content of the element, including the text content of any child elements. They will also ignore any HTML tags that may be present in the element's content. And, they can be used to set the text content of the element, too.
So far, these two properties appear to do the exact same thing. In fact, they both offer some convenient features that make them very useful. However, they start to exhibit some differences when the element's content is a little more complex.
Take the following HTML element, for example:
Let's take a look at the output of each of these two properties and see how they differ.
It's drastically different in this case, right?
HTMLElement.innerText is supposed to roughly match what the user sees in the browser. Another way to think of this is that its output should closely resemble what the user would get if they were to select the element's content and copy it to their clipboard.Code Snippets
<p id="greeting">Hi there! My name is <strong>Bubbles</strong>.</p>const greeting = document.getElementById('greeting');
greeting.innerText; // "Hi there! My name is Bubbles."
greeting.textContent; // "Hi there! My name is Bubbles."
greeting.innerText = 'Hello!'; // <p id="greeting">Hello!</p>
greeting.textContent = 'Hi!'; // <p id="greeting">Hi!</p><div class="card">
<style>
p { color: red; }
strong { text-transform: uppercase; }
small { display: none; }
</style>
<p>Hi there!<br />My name is <strong>Bubbles</strong>.</p>
<small>And I'm a <strong>dog</strong>.</small>
</div>Context
From 30-seconds-of-code: textcontent-or-innertext
Revisions (0)
No revisions yet.