如何使用JavaScript更改元素的ID

通常，在HTML文档中，给定给任何元素的ID是唯一的，并且只能将其分配给一个元素。但是，使用JavaScript后期更改该ID是可能的，遵循新ID的唯一性规则以及只有一个元素可以包含新ID。在本文中，我们将学习使用JavaScript更改元素ID的方法。

JavaScript提供了使用 id 属性来获取任何元素的ID，以及更改或添加HTML文档中任何HTML元素的新ID。

让我们看一下使用JavaScript在HTML文档中更改元素ID的 id 属性的用法，以及通过代码示例来说明。

语法

下面的语法将向您解释如何使用id属性来更改，获取和添加新的HTML元素。

Selected_element.id = newID;

在上述语法中，首先我们将使用HTML DOM选择要更改ID的HTML元素，然后使用点运算符将 id 属性赋给赋值运算符右侧的新id。

让我们通过代码示例来理解 id 属性在HTML文档中更改元素ID的实际实现。

步骤

步骤1 - 在步骤1中，我们将增加一个输入元素，以从用户获取新的ID，并且稍后我们将使用id属性更改同一输入元素的ID。
步骤2 - 在此步骤中，我们将向HTML文档中添加一个带有onclick事件的按钮元素，稍后将调用JavaScript函数来更改输入元素的ID。
步骤3 - 在下一步中，我们将获取输入元素并将元素的初始ID显示给用户，以便他们可以轻松查看元素ID的更改。
步骤4 - 在步骤4中，我们将定义一个JavaScript函数，在该函数中再次获取输入元素，并将其ID设置为用户在输入栏中输入的文本，并使用id属性将其更改为该文本。
步骤5 - 在最后一步中，我们将使用id属性显示分配给元素的新ID，并将该函数分配为onclick事件的值，以便在用户单击按钮时可以调用它。

示例

下面的示例将说明在HTML文档中使用id属性更改元素ID的用法。

<html>
<body>
   <h2>Changing ID of the element using JavaScript</h2>
   <p>Enter new ID, you want to give to element:</p>
   <input type = "text" id = "inp1"> <br> <br>
   <button id = "btn" onclick = "display()"> Click to change the ID </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you entered ID of your choice is: <b> " + inp1.id + " </b> <br>"
      function display() {
         var inp = document.getElementById('inp1');
         var newID = inp.value;
         inp.id = newID;
         result.innerHTML += " The ID of input element after clicking the button is changed to: <b> " + inp.id + " </b> <br> ";
      }
   </script>
</body>
</html>

在上面的示例中，我们使用JavaScript的id属性更改了输入元素的ID，并在用户屏幕上显示旧的ID和新分配给输入元素的ID。

让我们看另一个代码示例，在其中我们将直接在onclick事件中更改元素的ID，而不是传递函数给它。

步骤

上面的示例和这个示例的算法几乎相同。您只需要像下面的示例中所示更改按钮元素的onclick事件中传递的值。

示例

下面的示例将向您解释您必须在前一个算法中进行的更改，以使其像前一个示例那样更改输入元素的ID –

<html>
<body>
   <h2>Change ID of the element using JavaScript</h2>
   <p>Click the button below to change the ID of the below input element:</p>
   <input type = "text" id = "inp1", value = "Input Element"> <br> <br>
   <button id = "btn" onclick = "document.getElementById('inp1').id = 'newID'; return false">    Click to change the ID
   </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you clicked the button is: <b> " + inp1.id + " </b> <br><br>"
      result.innerHTML += "<b>Note: </b>To see the change in the ID of the input element open the developer tools and inspect the input element to see its ID after clicking the button. ";
   </script>
</body>
</html>

在上面的示例中，我们可以改变输入元素的ID，但在这种情况下，我们不能用我们自己选择的ID替换之前的ID，因为我们是静态地将新的ID值分配给元素。

在这篇文章中，我们学习了在HTML文档中更改元素的ID的方法，可以选择我们自己的ID，以及我们想要为元素分配的静态ID，该ID必须唯一，并且在文档中只能包含单个元素。