What’s the DOM? #3

In this article, I intended to teach you how to alter the HTML element innerText and text content.

If you target an HTML element and write console.dir(elementName) you’ll soo many attributes. if you scroll down and in I section you’ll see innerHTML, innerText and in T section you’ll see textContent. In this session, I teach you innerText and textContent and in the next lesson,k I’ll teach innerHTML which is very important.

If you write the above code and open your browser console by pressing ALT+SHIGT+I.

Browser console

If you click on the dropdown arrow you’ll see

innerHTML and InnerText

textContent

There are so many methods which all of them aren’t required to learn just a bunch of them is required.

innerText

The innerText only returns rendered text which is displayed in the browser window.

Browser window rendered text

We can change it’s content for example:

h1 content altered by innerText

innerText rendered in the browser window

textContent

This method returns the actual text which is written in the code editor not rendered text displays in the browser window.

This looks like the innerText method but when I add space between the text the textContent returns the space as well.

textContent returns the unrendered text

If you add any style or anything textContent returns it.