JavaScript bên trong là gì?

Question

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

Nội dung chính Show

InternalText để đọc văn bản
Viết văn bản
innerText VS textContent VS innerHTML
Phần kết luận
Where is innerText used in JavaScript?
What is difference between innerHTML and innerText?
What is innerText vs text content?
InternalText có phải là một chuỗi không?

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

"my_label">The text string
<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

"my_label"
>The text string 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

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

"my_label"
>The text string 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>

2 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
"my_text">The text with multiple spaces and a span</span>p>
After getting access to this element, let’s print its content one by one using innerText, textContent and 
"my_label"
>The text string 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>
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 
"my_label"
>The text string 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>
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 "my_label"
>The text string 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>
3 got both the text and the HTML tags included in the output



Another good example helping to understand the difference between the 
"my_label"
>The text string 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>
4 and "my_label"
>The text string 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>
7 is by implementing the invisibility of the text

<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 
"my_label"
>The text string 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>
7 and "my_label"
>The text string 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>
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 page
Another small difference between the two properties is compatibility - 
"my_label"
>The text string 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>
4 may not work in early versions of some web browsers
Phầ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 
"my_label"
>The text string 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>
7 or "my_label"
>The text string 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>
3 properties respectively
 
Where is innerText used in JavaScript?
The innerText property can be used to write the dynamic text on the html document . Here, text will not be interpreted as html text but a normal text. It is used mostly in the web pages to generate the dynamic content such as writing the validation message, password strength etc. 
What is difference between innerHTML and innerText?
innerText returns all text contained by an element and all its child elements.  innerHtml returns all text, including html tags, that is contained by an element . 
What is innerText vs text content?
Differences from innerText
Although the names seem similar, there are important differences. textContent gets the content of all elements, including  In contrast, innerText only shows "human-readable" elements. 
InternalText có phải là một chuỗi không?
Both innerText and innerHTML return internal part of an HTML element. The only difference between innerText and innerHTML is that. innerText return HTML element (entire code) as a string and display HTML element on the screen (as HTML code), while innerHTML return only text content of the HTML element.

programming javascript

JavaScript bên trong là gì?

InternalText để đọc văn bản

innerText VS textContent VS innerHTML

Phần kết luận

Where is innerText used in JavaScript?

What is difference between innerHTML and innerText?

What is innerText vs text content?

InternalText có phải là một chuỗi không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội