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.
Note: Please refer to this link to read more on the
innerHTMLproperty.
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.
//Retrieve the innerText using the following syntax
element.innerText;
//Set the innerText using the syntax below
element.innerText = text
Note: Whenever we set the
innerTextproperty for an HTML element, the child nodes of the element are replaced by only one new text node.
Return value
The return value for the innerText property is the text content of the HTML elements or all its descendants.
Note: The text content wrapped in
<script>&<style>tags is not returned using this property.
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 theinnerTextproperty to fetch the<div>text. - Line 8: Here, we have the
<button>element that fires thegetTextContent()method and listens to theonclickevent. - Lines 11–16: We use the
<script>tags to encapsulate JavaScript code and contain ourgetTextContent()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
innerTextproperty provided and then display the text content using a Javascriptalert.
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 thesetTextContent()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
innerTextproperty to manipulate the text content inside the target,<div>, and assign it to astringthat we want to set the text content to as the user clicks on the<button>.
Note: To learn more on the
document.getElementById()method, please visit this link.
