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:

Table of Content

Using innerHTML Property
Using innerText Property

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.

How to check an element is visible or not using jQuery?

XDoodler

Improve

Article Tags :

How to change the text of a label using JavaScript ?

Approach 1: Using innerHTML Property

Syntax:

Approach 2: Using innerText Property

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?