JavaScript 如何更改元素的ID

在本文中，我们将学习如何使用JavaScript更改元素的ID。ID对于任何元素都是唯一的，它只能被分配给一个元素一次。JavaScript提供了一种访问和操作ID的方法。

语法：

Selected_element.id = newID;

下面讨论了两种方法：

方法1： 我们可以使用 id属性 来使用JavaScript更改ID。

示例： 在这个示例中，我们将使用id属性来更改id。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>
          How to change the ID of element using 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>
            let 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>

输出：

JavaScript 如何更改元素的ID

方法2： 使用JavaScript，我们可以使用元素内的id属性来更改ID。

示例： 在这个示例中，我们将使用id属性来更改ID。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>
          How to change the ID of element using 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>
            let el_up =
                document.getElementById('GFG_UP');
 
            el_up.innerHTML = "Click on button to"
                + " change the ID of box.";
        </script>
</body>
</html>