Borislav Hadzhiev
Tue Jan 04 2022·3 min read
Photo by Frank Park
Use the textContent
property to get the text of a label
element, e.g.
const text = label.textContent
. The textContent
property will return the
text content of the label
and its descendants. If the element is empty, an
empty string is returned.
Here is the HTML for the examples in this article.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .bg-aqua { background-color: aqua; } </style> </head> <body> <div> <label id="label" for="first_name" >What is your <span class="bg-aqua">first</span> name?</label > <input type="text" name="first_name" id="first_name" /> </div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
const label = document.getElementById('label'); // 👇️ What is your first name? const result1 = label.textContent; console.log(result1); // 👇️ What is your first name? const result2 = label.innerText; console.log(result2);
We used the
textContent
property to get the text content of the label
element and its descendants.
If the label
element were empty, the property would return an empty string.
You might get leading or trailing spaces when using textContent
depending on
the structure of your HTML. If you need to remove any leading or trailing
spaces, use the trim()
method.
const label = document.getElementById('label'); // 👇️ What is your first name? const result1 = label.textContent.trim(); console.log(result1);
The code snippet also showed that we can use the innerText property to get the text content of an element and its descendants.
const label = document.getElementById('label'); // 👇️ What is your first name? const result2 = label.innerText; console.log(result2);
However, there are some important differences between the textContent
and
innerText
properties:
textContent
gets the content of all elements, including script
and
style
elements, whereas innerText
only gets the content of
"human-readable" elements.innerText
is aware of styling and does not return the text of hidden
elements, whereas textContent
does not take styles into consideration.textContent
can prevent cross-site scripting attacks.innerText
takes CSS styles into account, when the property is accessed, a reflow is triggered to ensure the styles are up-to-date.Reflows can be expensive and should be avoided when possible.
textContent
and innerText
to set the element's text content, the element's child nodes get removed.When using the textContent
and innerText
properties to update the text
content of the element, the child nodes of the element get replaced with a
single text node with the provided string value.
If you need to set an element's text content, use the insertAdjacentText method instead.
const label = document.getElementById('label'); // ✅ Update the text of label element label.insertAdjacentText('beforeend', '?????'); // ✅ Update the HTML of label element label.insertAdjacentHTML( 'beforeend', '<span style="background-color: salmon">Some extra HTML here</span>', );
The insertAdjacentText
method does not remove the child nodes of the element
it was called on.
The method takes the following 2 parameters:
position
- the position relative to the element of where the text should be
inserted. Can be one of the following 4:beforebegin
- before the element itself.afterbegin
- just inside the element, before its first child.beforeend
- just inside the element, after its last child.afterend
- after the element itself.data
- the string from which to create a new text node to insert at the
given position.The example also shows how to use the insertAdjacentHTML
method to insert HTML
into the label
element.
The insertAdjacentHTML
method takes the same first parameter as
insertAdjacentText
- the position where the content should be inserted.
const label = document.getElementById('label'); // ✅ Update the HTML of label element label.insertAdjacentHTML( 'beforeend', '<span style="background-color: salmon">Some extra HTML here</span>', );
Note that you shouldn't insert user input as HTML without escaping it.
This would leave you open to a cross-site scripting vulnerability.