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 ID of the element using JavaScript?
Generally, the ID given to any element in an HTML document is unique and can be assign to an element only once. But it is possible to change that id later using the JavaScript following the same rule of uniqueness for new ID as well as only single element can contain the new ID. In this article, we are going to learn about the ways of changing the ID of an element using JavaScript.
JavaScript provides us or allow us to use the id property to get the id of any element as well as to change or add a new ID to any HTML element in the document.
Let us see the use of the id property to change the ID of an element in HTML document using JavaScript with the help of code examples.
Syntax
Following syntax will explain you how to use the id property to change, get and add a new id to the HTML element −
Selected_element.id = newID;
In above syntax, first we will select the HTML element whose ID we want to change using the HTML DOM, the use the id property with dot operator to assign a new id on right hand side of assignment operator.
Let us understand the practical implementation of the id property to change ID of an element in HTML document with code examples.
Algorithm
Step 1 − In the first step, we will add a input element to get the new ID as a input from the user and later we will change the ID of the same input element using the id property.
Step 2 − In this step, we will add a button element to the HTML document with onclick event which will later call a JavaScript function to change the ID of the input element.
Step 3 − In the next step, we will grab the input element and display the initial id of the element to the users, so that they can easily see the change in the ID of element.
Step 4 − In the fourth step, we will define a JavaScript function, where we grab the input element again and set its id equal to the text entered by the user inside input bar and change its id to that text using the id property.
Step 5 − In the last step, we will display the new ID assigned to the element using the id property and assign the function as a value to the onclick event so that it can call it later when user clicks the button.
Example
Below example will illustrate the use of the id property to change the id of the element in HTML document −
<html>
<body>
<h2>Changing ID of the element using JavaScript</h2>
<p>Enter new ID, you want to give to element:</p>
<input type = "text" id = "inp1"> <br> <br>
<button id = "btn" onclick = "display()"> Click to change the ID </button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var inp1 = document.getElementById('inp1');
result.innerHTML += " The ID of the input element before you entered ID of your choice is: <b> " + inp1.id + " </b> <br>"
function display() {
var inp = document.getElementById('inp1');
var newID = inp.value;
inp.id = newID;
result.innerHTML += " The ID of input element after clicking the button is changed to: <b> " + inp.id + " </b> <br> ";
}
</script>
</body>
</html>
In the above example, we have changed the ID of the input element using the id property of the JavaScript and display the old as well as the new ID that is assigned to the input element on the user screen.
Let us see one more code example, where we will directly change the ID of the element inside the onclick event instead of passing function to it.
Algorithm
The algorithm of the above example and this example is almost similar. You just need to change the value passed inside the onclick event of the button element as shown in the below example.
Example
The example below will explain you the changes you have to make in the previous algorithm to make it change the id of the input element as the previous example does −
<html>
<body>
<h2>Change ID of the element using JavaScript</h2>
<p>Click the button below to change the ID of the below input element:</p>
<input type = "text" id = "inp1", value = "Input Element"> <br> <br>
<button id = "btn" onclick = "document.getElementById('inp1').id = 'newID'; return false"> Click to change the ID
</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var inp1 = document.getElementById('inp1');
result.innerHTML += " The ID of the input element before you clicked the button is: <b> " + inp1.id + " </b> <br><br>"
result.innerHTML += "<b>Note: </b>To see the change in the ID of the input element open the developer tools and inspect the input element to see its ID after clicking the button. ";
</script>
</body>
</html>
In the above example, we can change the ID of the input element, but in this case, we cannot replace the previous id with an id of our choice as we are statically assigning the new ID value to the element.
In this article, we have learned about the method of changing the id of the element present in the HTML document with an id of your choice as well as a static id we want to give to the element that has to be unique and only the single element in the document which can contain that id.
3K+ Views
