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
InternalText để đọc văn bản
Phần tử. 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
The text string
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string"
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
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
However, there are some exceptions in the range of fields that this property can have access to. For example, neither the content of and
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
0 tags nor the content of the hidden elements can be readThere is another property with the similar functionality -
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
1. 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 textViết văn bản
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
The text string The text of descendant
const element = document.getElementById["my_label"];
element.innerText = "New string";
console.log[element.innerText]; // logs "New string"
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
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
2 property insteadinnerText 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
The text with multiple spaces and a span
After getting access to this element, let’s print its content one by one using innerText, textContent and
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
3. You will see that all of the properties return a different result________số 8_______Thus, the textContent represented a string as it was written in a code, including all the spaces but without any tags. The
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
4 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 The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
3 got both the text and the HTML tags included in the outputAnother good example helping to understand the difference between the
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
4 and The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
7 is by implementing the invisibility of the text
#test > span {
display: none;
}
The test string The hidden string
element = document.querySelector["#test"];
console.log[element.textContent]; // logs "The test string The hidden string"
console.log[element.innerText]; // logs "The test string"
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
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
7 and The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
4 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 pageAnother small difference between the two properties is compatibility -
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
4 may not work in early versions of some web browsersPhần kết luận
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
The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
7 or The text string The text of descendant
const element = document.getElementById["my_label"];
console.log[element.innerText]; // logs "The text string The text of descendant"
3 properties respectively