Change Label Text on Button Click using JavaScript or jQuery

Last updated: 28th April 2025

There are multiple methods to dynamically change an element's text. In this guide, I'll share two practical examples demonstrating how to update a label's text with a button click using JavaScript or jQuery.

To dynamically change a label's text on button click, I'll add a button control to my webpage. The implementation of click events differs between JavaScript and jQuery, each offering unique approaches to handle user interactions.

I also have a textbox control (input type text), which will provide the value for the label.

Change Label Text on Button Click using JavaScript

The first example is in JavaScript, where I am using two different properties to change the text of a label. The properties are innerText and innerHTML. You can learn the difference between the two properties here.

I said I have a button and a textbox on my web page. The button’s click event will call a function. In that function I’ll get the value from the textbox and assign the value the label using the properties I have mentioned above.

Using innerText

<!DOCTYPE html>
<html>
 <body>
    Enter a Name: <input type="text" id="emp" value="" />
    <p><input type="button" id="bt" value="Change Label Text" onclick="changeLabel()" /></p>
    <label id="lblEmp">N/A</label>     <!--will change the text of this label-->
</body>
<script>
    function changeLabel() {
        let lbl = document.getElementById('lblEmp');
        let empName = document.getElementById('emp').value;

        lbl.innerText = empName;       // TREATS EVERY CONTENT AS TEXT.
    }
</script>
</html>

Try it

➡️ Difference between innerHTML and innerText

Using innerHTML

<!DOCTYPE html>
<body>
    Enter a Name: <input type="text" id="emp" value="" />
    <p><input type="button" id="bt" value="Change Label Text" onclick="changeLabel()" /></p>
    <label id="lblEmp">N/A</label>          <!--will change the text of this label-->
</body>
<script>
    function changeLabel() {
        let lbl = document.getElementById('lblEmp');
        let empName = document.getElementById('emp').value;

        // Assign HTML codes along with text values using innerHTML.
        lbl.innerHTML = 'Hello <span style="text-transform:capitalize;">' + empName + '</span>';
    }
</script>
</html>

Try it

Change Label Text on Button Click using jQuery

jQuery offers two distinct methods for modifying an element's text: html() and text(). These functions closely resemble the JavaScript properties discussed in the previous section, providing flexible ways to manipulate content dynamically.

Using html() Method

The html() method in jQuery allows you to incorporate HTML code alongside content or a text value. In this example, I've added a <span> element to modify the value retrieved from the textbox. With the html() method, you can insert and manipulate any HTML code dynamically.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
    Enter a Name: <input type="text" id="emp" value="" />
    <p><input type="button" id="bt" value="Change Label Text" /></p>
    <label id="lblEmp">N/A</label>
</body>
<script>
    $(document).ready(function () {
        $('#bt').on('click', function () {
            let empName = $('#emp').val().trim(); // Trim to remove unwanted spaces
            if (empName) {      // See if the input is not empty.
                $('#lblEmp').html(`Hello ${empName}`);
            } else {
                $('#lblEmp').html('Please enter your name.');
            }
        });
    });
</script>
</html>

Try it

Using text() Method

Use the text() method when you want the add simple text values (numbers, strings etc.). However, if you add HTML codes to the text() method, it will treat the markup as string values.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
    Enter a Name: <input type="text" id="emp" value="" />
    <p><input type="button" id="bt" value="Change Label Text" /></p>
    <label id="lblEmp">N/A</label>
</body>
<script>
$(document).ready(function () {
    $('#bt').on('click', function () {
        let empName = $('#emp').val().trim(); // Trim to remove unnecessary spaces
        if (empName) {      // Check to ensure input is not empty.
            $('#lblEmp').text(`Hello ${empName}`);
        } else {
            $('#lblEmp').text('Please enter your name.');
        }
    });
});
</script>
</html>

Try it

🚀 Great! Now see this example where I have used jQuery text() method to create simple Chat application.

Conclusion

Changing label text dynamically is widely used in forms, chat applications, and interactive webpages to provide instant feedback based on user input.

Dynamically changing label text using JavaScript and jQuery enhances interactivity on web pages. JavaScript offers direct control through properties like innerText and innerHTML, allowing developers to modify content efficiently. Meanwhile, jQuery provides convenient methods such as text() and html(), simplifying the process with cleaner syntax.

💡 Both approaches have their strengths: JavaScript gives precise control, while jQuery streamlines event handling and content manipulation. Understanding these techniques equips developers with the ability to create responsive and user-friendly interfaces.

← PreviousNext →