Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the text of a label using JavaScript?
Before going to learn about the method of changing the text of a label element in HTML document, let us understand what is the label tag itself?
The label tag helps in improving the usability of the web page for mouse users, as it can toggle the text inside it if the user clicks on it.
Let us now discuss about the methods of changing the text of the label element using JavaScript.
JavaScript allow us to use two inbuilt properties to change the text of any element in the HTML document, as listed below −
Using the innerHTML property.
Using the innerText property.
Using the innerHTML property
The innerHTML property allow us to change or assign the new text with some HTML, i.e. you can use the HTML tags while providing new text to it and manage the new text according to the importance using different HTML elements to define it.
Syntax
Following syntax is used to change or assign the new text to the label element using innerHTML property of JavaScript −
selected_label_element.innerHTML = " new Text ";
Let us understand the practical implementation of the innerHTML property to change the text of label element using JavaScript code examples −
Algorithm
Step 1 − In the first step, we will add a label element to the HTML document with an ID to grab it in JavaScript and change the text of it later using the innerHTML property.
Step 2 − In the next step, we will add an input element to the document to get input text from the user and replace the text of label element with that text.
Step 3 − In this step, we will add a button element with a onclick event associated with it which takes a function as value and calls it later when user clicks the button.
Step 4 − In the fourth step, we will define a JavaScript custom function inside which we use the innerHTML property to change the text of the label tag as shown in the above syntax.
Step 5 − In the last step, we will assign the function defined in the last step to the onclick event defined associated with the button tag, so that it can call it later on click to the button.
Example
The below example will explain how the innerHTML property is used practically to change the text of the label element using JavaScript −
<html>
<body>
<h2>Changing the text of a label using JavaScript</h2>
<p id = "upper"> The text of the below label element will be replaced by the text you enter in input bar once you click the button. </p>
<label id = "labelText"> This is the initial text inside the label element. </label> <br>
<input type = "text" id = "inp"> <br> <br>
<button id = "btn" onclick = "changeText()"> Click to change the Text </button>
<script>
var label = document.getElementById("labelText");
function changeText() {
var inp = document.getElementById("inp");
var enteredText = inp.value;
label.innerHTML = " <b> " + enteredText + ", </b> is the new text of the label element that replaces the previous text, which is entered by you. </b> ";
}
</script>
</body>
</html>
In the above example, first we grabbed the label element with the ID given to it in the document and then use the innerHTML property to change the text with a new text that also contains the HTML tags with it.
Using the innerText property
The innerText property is also used to change the text of any HTML element present in the HTML document as the innerHTML property does. It is almost similar to the innerHTML property, the only difference is that it does not allow to use the HTML elements with the text inside it. If you try to use HTML elements with the text it will consider them as a part of new text and display it on the user screen as it is.
Syntax
Following syntax will show you how to use the innerText property to change the text of label element −
selected_label_element.innerText = " new Text ";
Let us understand it in details with the help of JavaScript code example, where it is implemented practically.
Algorithm
The algorithm of the previous example and this example is almost similar. You just need to perform some minor changes by replacing the innerHTML property in above example with innerText property to change the text.
Example
Below example will illustrates the use of the innerText property to change the text of the label element in JavaScript −
<html>
<body>
<h2>Changing the text of a label using JavaScript</h2>
<p id = "upper">The text of the below label element will be replaced by the text you enter in input bar once you click the button.</p>
<label id = "labelText">This is the initial text inside the label element.</label> <br>
<input type = "text" id = "inp"> <br> <br>
<button id = "btn" onclick = "changeText()">Click to change the Text</button>
<script>
var label = document.getElementById("labelText");
function changeText() {
var inp = document.getElementById("inp");
var enteredText = inp.value;
label.innerText = enteredText + ", is the new text of the label element that replaces the previous text, which is entered by you. ";
}
</script>
</body>
</html>
In this example, we have used the innerText property in the same manner as we used the innerHTML property to change the text of the label element using the JavaScript.
In this article, we have learned about the two different methods of changing the text of the label element in the HTML document with their practical implementation inside the code examples. In the former one, we change the text with the innerHTML property which allow to use HTML elements to give as text inside the double quotes. While, in the later one, we used the innerText property which does not allow to do so.
4K+ Views
