innerText vs. textContent vs. innerHTML

When I started DOM, Everything that I learned previously started coming together in my mind. When learning something new I wanted to take a new approach and really dive into what these different events do. There are a lot of things that I want to cover, but today I want to talk about innerText vs innerHTML vs textContent.

1. innerHTML parses content as HTML, so it takes longer.

2. textContent uses straight text, does not parse HTML, and is faster.

3. innerText Takes styles into consideration. It won't get hidden text for instance.

innerText vs textContent:

innerText only shows "human-readable" elements and is aware of styling and won't return the text of "hidden" elements. innerText is roughly what you would get if you selected the text and copied it. Elements that are not rendered are not present in innerText, innerText will show the value as is and ignores any HTML formatting which may be included.

The innerText property sets the text content of an element. It also sets the contents of its descendants. Descendants may include tags inside a paragraph.

You can use innerText like so:

document.getElementById(“element”).innerText = “This is a test.”;

This sets the text value of the element with the id “element” to “This is a test.”

innerText returns the visible text contained in a node, while textContent returns the full text.

textContent gets the content of all elements, including <script> and <style> elements.

textContent returns every element in the node, whether rendered or not.

You can use textContent like so:

const text = document.getElementById("blog")

element.textContent = "I have changed the text!";

innerText and textContent and for the most part interchangeable with just a few little differences.

textContent appears to the same as innerText but keeps formatting (such as \p)

innerHTML:

innerHTML should not be included in a comparison with innerText or textContent, as it is totally different

innerHTML will show the value and apply any HTML formatting

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

InnerHTML is often used to set and modify the contents of a <p> element.

You can use innerHTML like so:

document.getElementById(“paragraph”).innerHTML = “Hello World!”;

This line of code sets the contents of the “paragraph” <p> element to “Hello World!” The getElementById() method retrieves an element by its ID.

There are some small differences between these three events but for the most part they are pretty interchangeable. I am looking forward to having more knowledge in the future by putting them into practice, but for right now I have a better understanding and hopes this helps you in your future code :)