In this Javascipt tutorial we learn how to return and change text, or HTML content, within an element.
We also discuss the differences between the innerText, innerHTML and textContent properties and which one we should use.
Javascript provides us with the textContent property that we can use to change the text inside an element.
When we change the value of the property, it will completely overwrite the previous value.
This property will only return the text inside an element. Any HTML inside the element will be stripped before the text is returned.
If we run the example above, we can see the formatting that’s present in the top paragraph is no longer there in the bottom paragraph.
This means we cannot use textContent to replace text with something that includes html.
If we run the example above, it will print the HTML code instead of creating a link.
Javascript also provides us with the innerHTML property that we can use to change the text inside an element.
Unlike the textContent property, innerHTML will return everything exactly as it is inside the element, including HTML.
This time the second paragraph has all its formatting and the link is still available because innerHTML brings any HTML along.
This means that we can include HTML elements when replacing text.
In the example above, the link is generated instead of displaying the code.
The innerText property works the same as the textContent property but will not return any hidden elements.
If we run the example above, we can see that innerText doesn’t display the hidden element.
Both innerText and textContent will display content inside or tags.
Example: script keep the formatting Example: style
keep the formatting The only difference is that innerText will keep the formatting, whereas textContent will not.
It depends on your situation. If you simply want to change the text in an element, any of these properties will work.
