Using JavaScript for web programming requires strong knowledge of the HTML elements and their properties. Sooner or later every programmer has to deal with a text. That’s why acquaintance with the Element.innerText property is indispensable.
This property allows you to set or read the text content of your element which is a quite common task. You can use it as either getter or setter: referencing to the property will return you the text content of the element and its descendants, while setting a new value will change the element’s whole text content.
innerText to read text
The Element.innerText property can read the text of the element. For this purpose you only need to get access to the element itself (for example, using the querySelector() or the getElementById() method). The following code proves how easy it is to get the text content of the item.
<label id="my_label">The text string</label>
<script>
const element = document.getElementById("my_label");
console.log(element.innerText); // logs "The text string"
</script>This property allows you to get the content of not only the element itself but also all its descendants. For example, let’s create a label nested in another label. Running the sampled code you can ensure that the innerText returns both strings.
<label id="my_label"
>The text string <label>The text of descendant</label></label
>
<script>
const element = document.getElementById("my_label");
console.log(element.innerText); // logs "The text string The text of descendant"
</script>However, there are some exceptions in the range of fields that this property can have access to. For example, neither the content of <script> and <style> tags nor the content of the hidden elements can be read.
There is another property with the similar functionality - Element.textContent. It can also help you to read the text of your elements, but unlike the innerText, it returns the content of all the child items including the hidden ones. At the same time the innerText can have access to the CSS and read the styles applied to the text.
Write text
Writing the text by means of the innerText property is simple. For example, let’s create a label with some text and then get access to it using the getElementById() function. If you assign a new text value to the innerText property, it will be shown in the web page and all its initial content will be cleared as illustrated in the example below.
<label id="my_label"
>The text string <label>The text of descendant</label></label
>
<script>
const element = document.getElementById("my_label");
element.innerText = "New string";
console.log(element.innerText); // logs "New string"
</script>Pay attention that changing the text content of the element in this way will not only clear the existing text but will also remove the content of all the inner elements. The textContent property works in the same way in this situation.
The innerText property is able to change only the text content of the element. If you try to assign the HTML code, it will be passed as a text and will not turn into real DOM-elements. That’s why for instances when you need the HTML code to be executed, it’s better to use the Element.innerHTML property instead.
innerText VS textContent VS innerHTML
As stated earlier all these properties work in quite a similar way but have their own differences. The best way to highlight it is an example. Let’s create a test string with multiple spaces and a span for that purpose.
<p id = "my_text">The text with multiple spaces and a <span>span</span></p>After getting access to this element, let’s print its content one by one using innerText, textContent and innerHTML. You will see that all of the properties return a different result.
const element = document.getElementById("my_text");
console.log(element.textContent);
// logs "The text with multiple spaces and a span"
console.log(element.innerText);
// logs "The text with multiple spaces and a span"
console.log(element.innerHTML);
// logs "The text with multiple spaces and a <span>span</span>"Thus, the textContent represented a string as it was written in a code, including all the spaces but without any tags. The innerText returned the text itself, without the spacing, but in a way the user would see it in a web page (as you know the redundant spaces in HTML are always trimmed). Finally, the innerHTML got both the text and the HTML tags included in the output.
Another good example helping to understand the difference between the innerText and textContent is by implementing the invisibility of the text.
<style>
#test > span {
display: none;
}
</style>
<div id="test">The test string <span> The hidden string </span></div>
<script>
element = document.querySelector("#test");
console.log(element.textContent); // logs "The test string The hidden string"
console.log(element.innerText); // logs "The test string"
</script>A text string is created and a part of it is made invisible by setting the display property to none. After getting access to the text using textContent and innerText different results are returned. The first one allowed printing the whole string, while the latter only returned the part which is visible in the web page.
Another small difference between the two properties is compatibility - innerText may not work in early versions of some web browsers.
Conclusion
The innerText property allows you to read the text of the element or easily change it. It’s very convenient when there is a need to manage your content dynamically. However, for the situations when you need to get the content of the hidden elements to be returned or you want to get the text including the HTML tags, you might consider some alternatives such as textContent or innerHTML properties respectively.