In Javascript, there are three properties that can be used to set or return an HTML element's content in the DOM: innerHTML, innerTEXT, and textCONTENT.
Before we dive straight in, let's take a step back for a second;
Have you heard about DOM manipulation? Let’s see, what is the DOM you might be thinking?
'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.
You will see three properties while working on the 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, innerHTML and textContent HTML attributes comes in. People sometimes get confused about these three properties. It’s time to clear all the confusion and get to know where to use these properties specifically.
Having said that, and clarifying to an extent what the DOM is, let's dive straight right into the business of the day!
<a class="button" id="btn" href="#">ONLINE APPLY <span style="display: none">HERE</span> </a>
Above is the HTML block of code that we will use for example
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 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.
const btn = document.querySelector('.button') btn.addEventListener('click', function (e) { console.log(e.target.innerHTML)
Above is the Javascript code for innerHtml
ONLINE APPLY <span style="display: none">HERE</span>:
Javascript output for innerHtml
Hence, the innerHTML property sets and returns the content of an element with new HTML content.
WHEN TO USE innerHtml?
You should use innerHtml when you want to see the HTML markup and what exactly is in your element — including any spacing, line breaks and formatting irregularities.
innerHtml ADDITIONAL NOTES
If the text inside the element includes the characters &, <, or >, innerHtml will return these characters as HTML entities “&”, “<” and “>”.
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.
btn.addEventListener('click', function (e) { console.log(e.target.innerText) })
Above is the Javascript code for innerText
ONLINE APPLY: Javascript output for innerText
Hence, the innerText property returns the content of all elements, except for script and style elements.
WHEN TO USE innerTEXT?
You should use innerText when you only need to see what’s in the element without the formatting.
innerTEXT ADDITIONAL NOTES
When using innerText it retrieves and sets the content of the tag as plain text. Whereas when you use innerHTML, it retrieves and sets the same content in HTML format.
textCONTENT
In textContent, all the text including the hidden contents can be accessed. textContent is all text contained by an element and all its children that are for formatting purposes only.
btn.addEventListener('click', function (e) { console.log(e.target.textContent) })
Above is the Javascript code for textContent
ONLINE APPLY HERE: Javascript output for textContent
Hence, The textContent property returns the raw content with styling inside of all elements, but excludes the HTML element tags. This includes script and style elements, whitespace, line breaks, and carriage returns.
WHEN TO USE textCONTENT?
You should use textContent when you want to see what’s in the element, plus any styling.
textCONTENT ADDITIONAL NOTES
While innerText is very similar to textContent, there are important differences between them. Put simply, innerText is aware of the rendered appearance of text while textContent is not
Summary: Unlike innerHTML, textContent has better performance because its value is not parsed as HTML. For that reason, using textContent can also prevent Cross-Site Scripting (XSS) attacks. Unlike innerText, textContent isn't aware of CSS styling and will not trigger a reflow. All Node objects have textContent, whereas only HTML Element objects have innerText.
If you found this useful, consider:
✅ Follow @vickyjhay for more content like this
✅ Follow me on Twitter where I share free resources on weekly basis!
Top comments (0)