What is the innerText property in JavaScript?

Overview

Often, developers tend to render content dynamically on their web pages as the user interacts with their websites. This dynamic rendering makes the web page elegant while simultaneously encouraging user interactions. Javascript has an innerText property that helps developers achieve this efficiently.

This innerText property retrieves or sets the text content inside an HTML element and its descendants. This property is quite similar to the innerHTML property of JavaScript, but there are some subtle differences between them.

The primary difference between the two is that the innerText property fetches or sets the textual content, whereas the innerHTML property returns the HTML content of an element or all its descendants.

Syntax

Now we have a basic understanding of the innerText let's see the syntax for this property.

Return value

The return value for the innerText property is the text content of the HTML elements or all its descendants.

Example 1

Let us now understand how can we retrieve the text content of an HTML element using innerText with the help of a code example below:

Explanation

The explanation for the code in the HTML tab is as follows:

• Lines 5–9: These lines of code contain the parent <div> which encloses the following elements:
• Line 6: We use an <img> tag to render the educative logo, as seen in the output tab above.
• Line 7: We have a <div> which encapsulates a child element in the form of <strong> tag, which boldens the text. We use the innerText property to fetch the <div> text.
• Line 8: Here, we have the <button> element that fires the getTextContent() method and listens to the onclick event.
• Lines 11–16: We use the <script> tags to encapsulate JavaScript code and contain our getTextContent() method. The description of the function is the following:
• Line 13: We use of document.getElementById() method to get hold of the <div> present on line 7.
• Line 14: We use the innerText property provided and then display the text content using a Javascript alert.

Example 2

The second primary use of this property is to set the innerText of an HTML element, and the following code example illustrates the use:

Explanation

The description for the code that resides in the HTML file is as follows:

• Lines 5–9: The structure of the code is similar to code example 1 but with some minute differences mentioned below:
• Line 7: The <div> now does not contain the <strong> tags, so the text content does not appear bold.
• Line 8: The <button> element now triggers the setTextContent() method, primarily for setting the text content as the user clicks.
• Lines 11–16: This piece of code contains the setTextContent() function that is explained below:
• Line 13: We got hold of our target, <div>, similar to what we have done in code example 1.
• Line 14: Here, we use the innerText property to manipulate the text content inside the target, <div>, and assign it to a string that we want to set the text content to as the user clicks on the <button>.