How to change the element id using jQuery ? - GeeksforGeeks

24 May, 2019
The jQuery methods are used to change the element ID which are described below:
jQuery attr() Method: This method set/return attributes and values of the selected elements. If this method is used to return the attribute value, it returns the value of first selected element. If this method is used to set attribute values, it sets one or more than one attribute/value pairs for the set of selected elements.Syntax:Return the value of an attribute:$(selector).attr(attribute)
Set the attribute and value:$(selector).attr(attribute, value)
Set attribute and value by using a function:$(selector).attr(attribute, function(index, currentvalue))
Set multiple attributes and values:$(selector).attr({attribute:value, attribute:value, ...})
Parameters:attribute: This parameter specifies the name of the attribute.value: This parameter specifies the value of the attribute.function(index, currentvalue): This parameter specifies a function that returns the attribute value to set.index: This parameter receives the index position of element in the set.currentValue: This parameter receives the current attribute value of selected elements.
Syntax:
Return the value of an attribute:$(selector).attr(attribute)

$(selector).attr(attribute)

Set the attribute and value:$(selector).attr(attribute, value)

$(selector).attr(attribute, value)

Set attribute and value by using a function:$(selector).attr(attribute, function(index, currentvalue))

$(selector).attr(attribute, function(index, currentvalue))

Set multiple attributes and values:$(selector).attr({attribute:value, attribute:value, ...})

$(selector).attr({attribute:value, attribute:value, ...})

Parameters:
attribute: This parameter specifies the name of the attribute.
value: This parameter specifies the value of the attribute.
function(index, currentvalue): This parameter specifies a function that returns the attribute value to set.index: This parameter receives the index position of element in the set.currentValue: This parameter receives the current attribute value of selected elements.
index: This parameter receives the index position of element in the set.
currentValue: This parameter receives the current attribute value of selected elements.
jQuery prop() Method: This method set/return properties and values of the matched elements. If this method is used to return the property value, it returns the value of the first selected element. If this method is used to set property values, it sets one or more property/value pairs for the set of selected elements.Syntax:Return the value of an property:$(selector).prop(property)
Set the property and value:$(selector).prop(property, value)
Set property and value using a function:$(selector).prop(property, function(index, currentvalue))
Set multiple properties and values:$(selector).prop({property:value, property:value, ...})
Parameters:property: This parameter specifies the name of the property.value: This parameter specifies the value of the property.function(index, currentvalue): This parameter specifies a function that returns the property value to set.index: This parameter receives the index position of element in the set.currentValue: This parameter receives the current property value of selected elements.
Syntax:
Return the value of an property:$(selector).prop(property)

$(selector).prop(property)

Set the property and value:$(selector).prop(property, value)

$(selector).prop(property, value)

Set property and value using a function:$(selector).prop(property, function(index, currentvalue))

$(selector).prop(property, function(index, currentvalue))

Set multiple properties and values:$(selector).prop({property:value, property:value, ...})

$(selector).prop({property:value, property:value, ...})

Parameters:
property: This parameter specifies the name of the property.
value: This parameter specifies the value of the property.
function(index, currentvalue): This parameter specifies a function that returns the property value to set.index: This parameter receives the index position of element in the set.currentValue: This parameter receives the current property value of selected elements.
index: This parameter receives the index position of element in the set.
currentValue: This parameter receives the current property value of selected elements.
Example 1: This example changes the ID of the element and changes the background color to red by using attr() method.
<!DOCTYPE HTML> <html>     <head>         <title>             Change the element ID        </title>           <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>              <style>            #myCol {                background: green;            }            #newID {                background: red;            }            table {                color: white;            }            td {                padding: 10px;            }        </style>    </head>           <body>        <center>                 <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                              <table>                <colgroup>                    <col id= "myCol"                        span= "3">                    <col style= "background-color:green">                </colgroup>                                  <tr>                    <th>S.No</th>                    <th>Title</th>                    <th>Geek_id</th>                </tr>                <tr id = "row1">                    <td>G_1</td>                    <td>GFG</td>                    <th>Geek_id_1</th>                </tr>                <tr>                    <td>Geek_2</td>                    <td>GeeksForGeeks</td>                    <th>Geek_id_2</th>                </tr>            </table>            <br>                          <button onclick = "Geeks()">                 Click here            </button>                           <script>                 function Geeks() {                        $("col").attr('id', 'newID');                }            </script>         </center>    </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example changes the ID of the element and changes the background color to red by using prop() method.
<!DOCTYPE HTML> <html>     <head>         <title>             Change the element ID        </title>                   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>                  <style>            #myCol {                background: green;            }            #newID {                background: red;            }            table {                color: white;            }            td {                padding: 10px;            }        </style>    </head>           <body>        <center>                 <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                          <table>                <colgroup>                    <col id= "myCol"                        span= "3">                    <col style= "background-color:green">                </colgroup>                                  <tr>                    <th>S.No</th>                    <th>Title</th>                    <th>Geek_id</th>                </tr>                <tr id = "row1">                    <td>G_1</td>                    <td>GFG</td>                    <th>Geek_id_1</th>                </tr>                <tr>                    <td>Geek_2</td>                    <td>GeeksForGeeks</td>                    <th>Geek_id_2</th>                </tr>            </table>            <br>                          <button onclick = "Geeks()">                 Click here            </button>                           <script>                 function Geeks() {                    $("col").prop('id', 'newID');                }            </script>         </center>    </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
jQuery-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?