How to change the text of a label using JavaScript ?
Last Updated :
09 Jan, 2025
Changing the text of a label using JavaScript involves selecting the label element and updating its textContent or innerHTML property. This allows you to modify the displayed text dynamically, often in response to user interactions or changes in data, enhancing interactivity and responsiveness.
Below are the approaches used to change the text of a label using JavaScript:
Approach 1: Using innerHTML Property
Using the innerHTML approach, you can change the text of a label by setting its innerHTML property to a new string value. This method updates the entire HTML content inside the element, allowing for dynamic text and HTML modifications within the label.
Syntax:
label_element.innerHTML = "new_Text";
Example: In this example, we includes a button that changes the text of a label using innerHTML to display styled text. When clicked, it updates the label with new HTML content.
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>
<!-- HTML label with an ID -->
<label id="labelWithHTML">Initial Text</label>
<!-- Button to trigger text change -->
<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:
Approach 2: Using innerText Property
Using the innerText approach, you can change the text of a label by setting its innerText property to a new string value. This updates the visible text content of the label while preserving HTML structure and avoiding script execution within the element.
Syntax:
label_element.innerText = " new_Text ";
Example: In this example, we features a button that updates a label's text using innerText. Clicking the button changes the label's content to "New Text using innerText" without HTML formatting.
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>
<!-- HTML label with an ID -->
<label id="labelWithText">Initial Text</label>
<!-- Button to trigger text change -->
<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.
Similar Reads
How to change font-weight of a text using JavaScript ? In this article, we will set the font-weight of a text dynamically using JavaScript. Ti change the font weight dynamically, we use HTML DOM Style fontWeight property. Syntax: object.style.fontWeight = "value" Property Values: normal: The font weight is the default value.lighter: The font weight is t
1 min read
How to Change the Button Label when Clicked using JavaScript ? Changing the Label of the Button element when clicked in JavaScript can be used to provide more information to the user such as the text of the Submit button will change to the Submitted as soon as the form submission is completed. The below approaches can be used to accomplish this task: Table of C
2 min read
JavaScript - How to Change the Content of a <Textarea> ? Here are the various methods to change the content of a textarea using JavaScript.1. Using value PropertyThe value property is the most common method to change or retrieve the content of a <textarea>.HTML<textarea id="myTextarea">Initial content</textarea> <button onclick="chang
2 min read
How to Change Text Inside all HTML Tags using JavaScript ? In this article, we will learn how to change the text content inside all HTML tags using JavaScript. This skill is valuable when you need to dynamically modify the text displayed on a web page. which can be useful for various scenarios like updating content, internationalization, or creating dynamic
3 min read
How to Change the Placeholder Text using jQuery? We can change the placeholder Text of an input element using the attr() attribute and placeholder property of jQuery. We will create a button and on clicking the button the text of the placeholder will be changed dynamically.Below are the approaches to change the placeholder text using jQuery:Table
2 min read
How to Change Button Label in Alert Box using JavaScript ? In JavaScript, the alert method is used to display an alert box with a message. By default, the alert box contains an "OK" button. We cannot directly update the default alert box, However, we can customize the button label by creating a custom alert box using HTML, CSS, and JavaScript. ApproachCreat
2 min read