How to change the ID of element using JavaScript ?

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output:

Approach 2: We can use the id property inside the element to change the ID using JavaScript.

  • Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.