How to change the ID of element using JavaScript ? - GeeksforGeeks

23 Apr, 2020
Given an HTML document and the task is to change the ID of the element using JavaScript. There are two approaches that are discussed below:
Approach 1: We can use the id property to change the ID using JavaScript.
Example:<!DOCTYPE HTML><html>  <head>    <title>        Change the ID of the element        using pure JavaScript    </title>      <style>        .div {            height: 100px;            width: 200px;            margin: 0 auto;            color: white;        }          #div1 {            background: green;        }          #div2 {            background: blue;        }    </style></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>          <p id="GFG_UP"></p>      <div class="div" id="div1"></div>    <br>      <button onClick="GFG_Fun()">        click here    </button>          <script>        var el_up = document.getElementById('GFG_UP');        el_up.innerHTML = "Click on button to "                        + "change the ID of box.";                                  function GFG_Fun() {            document.getElementById('div1').id = 'div2';        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        Change the ID of the element        using pure JavaScript    </title>      <style>        .div {            height: 100px;            width: 200px;            margin: 0 auto;            color: white;        }          #div1 {            background: green;        }          #div2 {            background: blue;        }    </style></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>          <p id="GFG_UP"></p>      <div class="div" id="div1"></div>    <br>      <button onClick="GFG_Fun()">        click here    </button>          <script>        var el_up = document.getElementById('GFG_UP');        el_up.innerHTML = "Click on button to "                        + "change the ID of box.";                                  function GFG_Fun() {            document.getElementById('div1').id = 'div2';        }    </script></body>  </html>
Output:
Approach 2: We can use the id property inside the element to change the ID using JavaScript.
Example:<!DOCTYPE HTML><html>  <head>    <title>        Change the ID of the element        using pure JavaScript    </title>      <style>        .div {            height: 100px;            width: 200px;            margin: 0 auto;            color: white;        }          #div1 {            background: green;        }          #div2 {            background: blue;        }    </style></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      <div class="div" id="div1"></div>    <br>      <button onclick="document.getElementById(        'div1').id = 'div2'; return false">        click here    </button>      <script>        var el_up =             document.getElementById('GFG_UP');          el_up.innerHTML = "Click on button to"                    + " change the ID of box.";    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        Change the ID of the element        using pure JavaScript    </title>      <style>        .div {            height: 100px;            width: 200px;            margin: 0 auto;            color: white;        }          #div1 {            background: green;        }          #div2 {            background: blue;        }    </style></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      <div class="div" id="div1"></div>    <br>      <button onclick="document.getElementById(        'div1').id = 'div2'; return false">        click here    </button>      <script>        var el_up =             document.getElementById('GFG_UP');          el_up.innerHTML = "Click on button to"                    + " change the ID of box.";    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)