Open In App

How to change the text of a label using JavaScript ?

Last Updated : 18 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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:

Table of Content

Approach 1: Using innerHTML

  • 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>
    <!-- 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:

1

Approach 2: Using innerText

  • 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>
  <!-- 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:

2

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.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads