Borislav Hadzhiev
Last updated: Jan 4, 2022
Check out my new book
Use the textContent
property to change the text of a label
element, e.g.
label.textContent = 'Replacement label text'
. The textContent
property will
set the text of the label
to the provided string, replacing any of the
existing content.
Here is the HTML for the examples in this article.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .bg-salmon { background-color: salmon; } </style> </head> <body> <div> <label id="label" for="first_name" >What's your <span class="bg-salmon">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'); // ✅ Change (replace) the text of the label label.textContent = 'Replacement label text'; // ✅ Change (replace) the content with HTML label.innerHTML = `<span style="background-color: lime">Replacement label HTML</span>`; // ✅ Append / Prepend text to the label label.insertAdjacentText('beforeend', ' appended text'); // ✅ Append / Prepend HTML to the label label.insertAdjacentHTML( 'beforeend', `<span style="background-color: lime"> appended HTML</code>`, );
We used the
textContent
property on the label
to change its text content.
The textContent
property can also be used to read the text content of the
element and its descendants.
textContent
on an element, removes all of the element's children and replaces them with a single text node with the provided string.If you need to completely replace the HTML content of the label
, use the
innerHTML
property.
const label = document.getElementById('label'); label.innerHTML = `<span style="background-color: lime">Replacement label HTML</span>`;
The innerHTML
property gets or sets the HTML contained within the element.
By setting the property on an element, you effectively replace the HTML
previously contained in the label
.
If you need to append / prepend text to the existing content of the label
element, use the insertAdjacentText
method instead.
const label = document.getElementById('label'); // ✅ Append / Prepend text to the label label.insertAdjacentText('beforeend', ' appended text');
The insertAdjacentText 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.label
element, before its last child, but you can change the value of the position
parameter depending on your use case.If you need to insert HTML to the label
, use the
insertAdjacentHTML
method.
const label = document.getElementById('label'); label.insertAdjacentHTML( 'beforeend', `<span style="background-color: lime"> appended HTML</code>`, );
The first parameter the insertAdjacentHTML
method takes is the same as
insertAdjacentText
- the position at which the HTML should be inserted.
The second parameter is an HTML string containing the content you want to insert.