How to Assign or Set Value Dynamically to a Label using JavaScript

← PrevNext →

Here’s a little tip I thought would be useful and worth sharing with a beginner. 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 the web page, denoting a name or product description etc. We can set the value of the label dynamically using JavaScript, jQuery or using Asp.Net code behind procedures. Here, I’ll show you how you can do this using plain JavaScript.

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.

The Markup
<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 dynamically in 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 article.

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

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 the methods work fine on different browsers, as I have mentioned above (see Browser Support). At this stage however, you must be wondering, what possible difference does both the properties make. 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 color to the text. For example, in the above text Hi, I am Arun Banik, I would like to set the string Arun Banik as bold and even underline it. This is how I would do it.

Note: Properties are case sensitive.

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

The output now would be,

Hi, I am Arun Banik

Look carefully at the end of the above line I have added the string Arun Banik between the HMTL element <b> ... </b>.

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

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.

That's it. Thanks for reading .

← PreviousNext →