How to set or assign value to label using JavaScript

javascript

← PrevNext →

Tools you can use

I am sharing a JS tip here, especially for beginners. Often we come across a situation where we want to set or assign a value or text to a Label control dynamically. Usually a label would have a value assigned while designing a web page. But if required, we can assign (or change) the text of a label using JavaScript or using jQuery. Here, I’ll show you how you can do this using plain JavaScript.
The Markup

Let us assume, we have a <label> control on our web page, with just an ID. However, no value has been assigned to it yet.

<label id="lblName"></label>

The label above shows nothing on the browser, since "lblName" has no value (a name in this context). However, you can assign a value to the label dynamically using JavaScript. You can do this by using either innerHMTL or innerText properties.

Note: Please do not leave the article "mid way", because I have explained the "difference between properties innerHTML and innerText" at the end of this tutorial.

1) Using JavaScript innerHTML Property

In the first method, I am assigning a value to the label using the innerHTML property.

The Script
<script>
    document.getElementById('lblName').innerHTML = 'Hi, I am Arun Banik';
</script>

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

Try it Yourself

2) Using JavaScript innerText property

Here in the second method, I am assigning a value to the <label> using JavaScript innerText property.

The Script
<script>
    document.getElementById('lblName').innerText = 'Hi, I am Arun Banik';
</script>

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

Both methods work fine on different browsers (see Browser Support).

Now, you must be wondering, what possible difference does both the properities have. Yes, there is a difference.

Difference between innerHTML and innerText

The name of each property defines itself. 👉 The innerHTML property allows us to write HTML codes along a text value. I can set the text as bold, italic, "underline it" and even set a "colour" to the text.

For example, in the above text "Hi, I am Arun Banik", suppose I would like to set the string Arun Banik as bold and even underline it. This is how I would do it.

<script>
    document.getElementById('lblName').innerHTML = 'Hi, I am <b> Arun Banik </b>';
</script>

Remember: Properties are case sensitive.

The output now would be,

Hi, I am Arun Banik

Look carefully at the end of the code, I have added the string Arun Banik between the <b> ... </b> tag.

Similarly, you can "underline" the text using the <u> and </u> tag.

document.getElementById('lblName').innerHTML = 'Hi, I am <u> Arun Banik </u>';

👉 However, the innerText property allows us to add plain text values only. It "won't" format the assigned text. Therefore, even you if you add an HTML element to the text using "innerText", it would assign the value as it is (along with the element).

Conclusion

We have seen two different procedures to assign values to a <label> control using JavaScript properties innerHTML and innerText respectively. In addition, I have explained the difference between the two properties.

Similarly, using the above-mentioned properties, you can retrieve or get the values from the <label> control.

← PreviousNext →