Change Label Text on Button Click using JavaScript or jQuery

There are many ways you can change the text of an element dynamically. However, here I am shareing two different examples showing how to change the text of a label on button click using JavaScript or jQuery.

Since I want to change the label text on button click, I’ll add a button control on my webpage. The click events are used differently in both JavaScript and jQuery.

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 too provides two separate methods to assign or change an element’s text. The methods are html() and text(). The function of the methods are quite similar to the JavaScript properties that I have explained in the above section.

Using html() Method

Use the html() method in jQuery when you want to add HTML code along with the content or a text value. Here, I have added a <span> element to transform the value that I’ll get from the textbox. You can add any HTML code using the html() method.

<!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').click(function () {
            let empName = $('#emp').val();
            $('#lblEmp').html('Hello <span style="text-transform:capitalize;">' + empName + '</span>');
        });
    });
</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').click(function () {
            let empName = $('#emp').val();
            $('#lblEmp').text('Hello ' + empName);
        });
    });
</script>
</html>

Try it

← PreviousNext →