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 element id using jQuery?
jQuery is one of the JavaScript libraries which is fast, small, and feature-rich. It is used to perform event handling, animation, etc. It is a combination of versatility and extensibility. jQuery is used to simplify the AJAX call and DOM manipulation.
Using jQuery, we can make a webpage interactive by responding to a mouse click event. jQuery includes the features like Events, Effects, animations, Ajax, JSON parsing, Cross-browser support, and extensibility. It distributes as a single JavaScript file which defines all of its interfaces like DOM, Events, and the Ajax functions.
jQuery consists of two functions, one function is static utility functions, and the other one is object methods.
We can use the attr() function in jQuery to change the value of an element's id. You can also use the prop() function as well.
Let us discuss in detail these two methods of jQuery.
Approach 1: Using the jQuery attr( ) Method
It is one of the ways to change the element ID. The attributes and values of the selected elements can be set or returned using the attr() method. If the jQuery attr() returns the attribute, then it returns the first value of matched HTML element. If the jQuery attr() sets the attribute values, then it sets one or more attribute or pair values for the set of matched HTML elements.
Syntax
The following is the syntax for the attr() method −
For returning the value of an attribute, it will be as follows −
$(selector).attr(attribute)
For setting the value and attribute
$(selector).attr(attribute, value)
Uses a function to set the value and attribute as follows−
$(selector).attr(attribute, function(index, currentvalue))
For setting the multiple values and attributes the following is used−
$(selector).attr({attribute:value, attribute:value,…})
Parameters
attribute −specify the attribute name.
value − Specified value of the attribute.
function(index,currentvalue) − Specified a function that returns the value of the attribute to set. Here, the index receives the position of the index in an element within the set. And the currentvalue receives the value of the current attribute for the selected elements.
Example
In these example, we are going to change the element ID using the attr() method of jQuery.
<html>
<head>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#myColor {color: white; background: black; padding:30px; height: 90px; width: 400px;
}
#newColor {background: pink; width: 650px; color: white; padding:30px; height: 90px;
}
</style>
</head>
<body>
<div id="myColor"><p style="text-align:center;">Changing the Element ID</p> </div><br>
<button onclick = "myFuntion()"> Click here </button>
<script>
function myFuntion() {
$("div").attr('id', 'newColor');
}
</script>
</center>
</body>
</html>
As we see in the example, here we used the attr() method which is used to change the element ID of an HTML Element, and it is a jQuery attribute method. We need to import the jQuery library for performing the jQuery-related functionalities.
The attributes and values of the selected elements can be set or returned using the attr() method. The value of the first matched element is returned if the jQuery attr() is used to return the attribute. These attribute methods are to change the element ID of the element.
Before we click the button, the background color is shown as black color, once we click the button it changes color to pink.
Approach 2: Using the prop() method
We can change the element ID of an HTML element by using the prop() method. It is used to sets or return properties and values of the selected HTML elements. The value of the first matched element is returned when the jQuery prop() is used to return the property value. The one or more property of value pairs for the set of matching elements which are sets, if the jQuery prop() method is used to set the values of the property.
The following is the syntax for the prop() method −
For returning the value of a property and it will be as follows −
$(selector).prop(property)
For setting the property and value
$(selector).prop(property, value)
Set property and value using a function as follows−
$(selector).prop(property, function(index, currentvalue))
Set multiple properties and values as follows −
$(selector).prop(property:value, property:value,…))
Parameters
attribute – Specify the property name
value – Specify property value
function(index,currentvalue) – Specifies a function that returns the property value to set. Here, the index receives the index position of the HTML element within the set. currentvalue receives the property value of the current selected elements.
Example
Let us take another example, to check how we can change the element ID by using the prop( ) method.
<html>
<head>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#myColor {color: white; background: black; padding:30px; height: 90px; width: 550px;
}
#newColor {background: green; width: 550px; color: white; padding:30px; height: 90px;
}
</style>
</head>
<body>
<div id="myColor"><p style="text-align:center;">Changing the Element ID</p> </div><br>
<button onclick = "myFuntion()"> Click here </button>
<script>
function myFuntion() {
$("div").prop('id', 'newColor');
}
</script>
</center>
</body>
</html>
As we see in the example, here we used the prop() method to change the element ID of an HTML Element, which is a jQuery property method.
Before we click the button, the background color is shown as black color, once we click the button it changes color to green.
Conclusion
In this article, we have demonstrated how we can change element ID along with examples. We have seen the two different examples here, in the first example, we used the attr() method and onclick event to change the element ID after clicking the button. In the second example, we used the prop() method and onClick event to change the element ID after clicking the button.
5K+ Views
