JAVASCRIPT

innerText vs textContent

// textContent gets the content of all elements, including <script> and <style> elements.
// textContent returns every element in the node.
// innerText only shows “human-readable” elements.
// innerText looks at styling and won't return the text of “hidden” elements.

<style>
.special { display: none; }
</style>
<h1>Heading <span class="special">Special</span> </h1>

const h1 = document.querySelector('h1');
console.debug(h1.textContent); // " Heading Special "
console.debug(h1.innerText); // "Heading"

textcontent vs innertext in JS

You can forgot all the points that may confuse you but remember 3 things:

When you are trying to alter the text, textContent is usually the property you are looking for.
When you are trying to grab text from some element, innerText approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied to the clipboard. And textContent gives you everything, visible or hidden, including <script> and <style> elements.

In element nodes, innerText evaluates <br> elements, while textContent evaluates control characters: