Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 assigned to an element only once. However, it is possible to change that ID later using JavaScript while following the same rule of uniqueness for the new ID. In this article, we will learn how to change the ID of an element using JavaScript.
JavaScript provides 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.
Syntax
The following syntax shows how to use the id property to change, get, and add a new ID to an HTML element:
selectedElement.id = newID;
In the above syntax, first we select the HTML element whose ID we want to change using the DOM, then use the id property with the dot operator to assign a new ID.
Example 1: Changing ID with User Input
This example demonstrates how to change an element's ID based on user input:
<html>
<body>
<h2>Changing ID of Element using JavaScript</h2>
<p>Enter new ID for the input element:</p>
<input type="text" id="inp1" placeholder="Enter new ID"> <br> <br>
<button onclick="changeID()">Click to change the ID</button>
<p id="result"></p>
<script>
var result = document.getElementById("result");
var inp1 = document.getElementById('inp1');
result.innerHTML = "Original ID of input element: <b>" + inp1.id + "</b><br>";
function changeID() {
var inp = document.getElementById('inp1');
var newID = inp.value;
if (newID) {
inp.id = newID;
result.innerHTML += "New ID of input element: <b>" + inp.id + "</b><br>";
} else {
alert("Please enter a valid ID");
}
}
</script>
</body>
</html>
Example 2: Direct ID Change
This example shows how to change an element's ID directly within the onclick event:
<html>
<body>
<h2>Change ID Directly using JavaScript</h2>
<p>Click the button to change the input element's ID to 'newInputID':</p>
<input type="text" id="originalID" value="Sample Input"> <br> <br>
<button onclick="document.getElementById('originalID').id = 'newInputID'; showChange()">
Change ID
</button>
<p id="status"></p>
<script>
var status = document.getElementById("status");
var input = document.getElementById('originalID');
status.innerHTML = "Current ID: <b>" + input.id + "</b>";
function showChange() {
var changedInput = document.getElementById('newInputID');
status.innerHTML += "<br>ID changed to: <b>" + changedInput.id + "</b>";
}
</script>
</body>
</html>
Alternative Methods
You can also use other DOM selection methods to change element IDs:
<html>
<body>
<div class="myClass">Element with class</div>
<button onclick="changeByClass()">Change ID by Class</button>
<p id="output"></p>
<script>
function changeByClass() {
// Select by class name
var element = document.getElementsByClassName('myClass')[0];
element.id = 'newDivID';
document.getElementById('output').innerHTML =
"Element ID changed to: <b>" + element.id + "</b>";
}
</script>
</body>
</html>
Key Points
Element IDs must be unique within the HTML document
Changing an ID affects CSS styling and JavaScript references
Always validate new ID values to ensure they're not empty or duplicate
Use
getElementById()to select elements before changing their IDs
Conclusion
JavaScript's id property provides a simple way to dynamically change element IDs. Remember that IDs must remain unique, and changing them affects how you reference elements in your code.
5K+ Views
