Article Categories

Selected Reading

How to change the text of a label using JavaScript?

Javascript Web Development Front End Technology

The HTML <label> tag improves web accessibility by providing clickable text descriptions for form elements. In JavaScript, you can dynamically change label text using two properties: innerHTML and innerText.

Using the innerHTML Property

The innerHTML property allows you to set both text and HTML markup. It's useful when you need to include formatting like bold, italics, or other HTML elements.

Syntax

selectedElement.innerHTML = "new text with <b>HTML</b> tags";

Example

<!DOCTYPE html>
<html>
<body>
   <h2>Change Label Text with innerHTML</h2>
   <label id="myLabel">Original label text</label><br><br>
   <input type="text" id="textInput" placeholder="Enter new text"><br><br>
   <button onclick="changeWithInnerHTML()">Change Text</button>
   
   <script>
      function changeWithInnerHTML() {
         var label = document.getElementById("myLabel");
         var input = document.getElementById("textInput");
         var newText = input.value;
         
         if (newText) {
            label.innerHTML = "<b>" + newText + "</b> (changed with innerHTML)";
         }
      }
   </script>
</body>
</html>

Using the innerText Property

The innerText property sets plain text only. Any HTML tags you include will be displayed as literal text rather than rendered as markup.

Syntax

selectedElement.innerText = "plain text only";

Example

<!DOCTYPE html>
<html>
<body>
   <h2>Change Label Text with innerText</h2>
   <label id="textLabel">Original label text</label><br><br>
   <input type="text" id="plainInput" placeholder="Enter new text"><br><br>
   <button onclick="changeWithInnerText()">Change Text</button>
   
   <script>
      function changeWithInnerText() {
         var label = document.getElementById("textLabel");
         var input = document.getElementById("plainInput");
         var newText = input.value;
         
         if (newText) {
            label.innerText = newText + " (changed with innerText)";
         }
      }
   </script>
</body>
</html>

Comparison

Property	HTML Rendering	Use Case
`innerHTML`	Renders HTML tags	When you need formatted text
`innerText`	Displays HTML as plain text	When you need plain text only

Complete Example

Here's a comprehensive example showing both methods side by side:

<!DOCTYPE html>
<html>
<body>
   <h2>innerHTML vs innerText Comparison</h2>
   
   <div>
      <label id="htmlLabel">Label for innerHTML</label><br>
      <label id="textLabel">Label for innerText</label><br><br>
      
      <input type="text" id="userInput" placeholder="Type: <b>Bold Text</b>"><br><br>
      <button onclick="updateLabels()">Update Both Labels</button>
   </div>
   
   <script>
      function updateLabels() {
         var htmlLabel = document.getElementById("htmlLabel");
         var textLabel = document.getElementById("textLabel");
         var input = document.getElementById("userInput");
         var userText = input.value || "<b>Default Bold Text</b>";
         
         // innerHTML renders HTML tags
         htmlLabel.innerHTML = "innerHTML: " + userText;
         
         // innerText shows HTML tags as literal text
         textLabel.innerText = "innerText: " + userText;
      }
   </script>
</body>
</html>

Conclusion

Use innerHTML when you need to include HTML formatting in your label text. Choose innerText for plain text content to avoid security risks and ensure consistent display.

Abhishek

Updated on: 2026-03-15T23:19:00+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next