Difference in Javascript properties(innerHTML, innerText, textContent).

Have you heard about DOM manipulation? Let’s see what is DOM?
Document Object Model (DOM) is a programming interface for HTML. Simply you can say, the structure of your HTML document. The DOM is a tree-like representation of the contents of a webpage using nodes instead of elements. These nodes represent HTML elements, and they can be manipulated and re-rendered. The DOM is hierarchical, following a logical
tree-like structure, where child nodes are contained in parent nodes.

Document Object Model (DOM)

You will see three properties while working on DOM i.e innerText, innerHTML, textContent. You’ll need to know how to change the text or the HTML that appears on the page to make your sites more interactive. All innerText, innerHTML and textContent properties let you access and change the contents of a tag. That’s where the innerText and innerHTML, textContent HTML attributes come in. People sometimes got confused about these three properties. It’s time to clear all the confusion and get to know where to use these properties.

HTML that we will use for examples

innerHTML
The JavaScript innerHTML property sets the HTML contents of an element on a web page. InnerHTML is a property of the HTML DOM and is often used to set and modify the contents of an <p> element. innerHTML returns the content of an element and any spacing and descendants. innerHTML returns all text, including HTML tags, that is contained by an element.

Javascript code for innerHTML

Javascript code for innerHTML (Output)

innerText
The JavaScript innerText property sets the text content of an element that is visible on a web page are accessed. The hidden content cannot be retrieved. It also sets the contents of its descendants. innerText returns the text without any descendants or spacing. You would use innerText if you want to see the contents of an element in plain text. innerText returns all text and tags contained by an element and all its child elements.

Javascript code for innerText

Javascript code for innerText (Output)

textContent
In textContent, all the text including the hidden contents can be accessed. textContents is all text contained by an element and all its children that are for formatting purposes only.

Javascript code for textContent

Javascript code for textContent (Output)