How to change the text of a label using JavaScript ?
To change the text of a label, JavaScript allows us to use two inbuilt properties to change the text of any element in the HTML document. In this article, we are going to see how we can change the text of a label using JavaScript.
Below are the approaches used to change the text of a label using JavaScript:
- Create an HTML label with a unique ID.
- Add a button with an
onclick
attribute to trigger the text change.
- Define a JavaScript function (
changeTextWithHTML
) to change the label text using innerHTML
.
- Within the function, get the label element by its ID.
- Use the
innerHTML
property to set the new text with HTML content.
Syntax:
label_element.innerHTML = "new_Text";
Example: In this example, we are using innerHTML.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >Change Label Text - innerHTML</ title >
</ head >
< body >
< label id = "labelWithHTML" >Initial Text</ label >
< button onclick = "changeTextWithHTML()" >
Change Text</ button >
< script >
// Function to change label text with HTML content
function changeTextWithHTML() {
let labelElement = document
.getElementById("labelWithHTML");
labelElement.innerHTML =
"< em >New Text</ em > using < strong >innerHTML</ strong >";
}
</ script >
</ body >
</ html >
|
Output:
- Create an HTML label with a unique ID.
- Add a button with an
onclick
attribute to trigger the text change.
- Define a JavaScript function (
changeTextWithText
) to change the label text using innerText
.
- Within the function, get the label element by its ID.
- Use the
innerText
property to set the new plain text content.
Syntax:
label_element.innerText = " new_Text ";
Example: In this example, we are using innerText.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >Change Label Text - innerText</ title >
</ head >
< body >
< label id = "labelWithText" >Initial Text</ label >
< button onclick = "changeTextWithText()" >Change Text</ button >
< script >
// Function to change label text with plain text content
function changeTextWithText() {
let labelElement = document.getElementById("labelWithText");
labelElement.innerText =
"New Text using innerText";
}
</ script >
</ body >
</ html >
|
Output:
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Last Updated :
18 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...