¿Cómo cambiar la ID del elemento usando JavaScript?

Dado un documento HTML y la tarea es cambiar la ID del elemento usando JavaScript. Hay dos enfoques que se analizan a continuación:

Enfoque 1: Podemos usar la propiedad id para cambiar la ID usando JavaScript.

Ejemplo:

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

Producción:

Enfoque 2: Podemos usar la propiedad id dentro del elemento para cambiar la ID usando JavaScript.

Ejemplo:

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

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta