如何使用 JavaScript 更改元素的 ID？

WBOY 转载: 2023-09-13 14:45:13 848浏览

一般来说，HTML 文档中任何元素的 ID 都是唯一的，并且只能分配给一个元素一次。但稍后可以使用 JavaScript 更改该 id，遵循新 ID 的唯一性相同规则，并且只有单个元素可以包含新 ID。在本文中，我们将了解使用 JavaScript 更改元素 ID 的方法。

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

让我们借助代码示例了解如何使用 id 属性通过 JavaScript 更改 HTML 文档中元素的 ID。

语法

以下语法将向您解释如何使用 id 属性来更改、获取新的 id 以及向 HTML 元素添加新的 id -

Selected_element.id = newID;

在上面的语法中，首先我们将使用 HTML DOM 选择要更改其 ID 的 HTML 元素，然后使用带有点运算符的 id 属性在其右侧分配一个新的 id赋值运算符。

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

算法

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

示例

下面的示例将说明如何使用 id 属性来更改 HTML 文档中元素的 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 值分配给该元素。 p>

在本文中，我们了解了如何使用您选择的 id 以及我们想要赋予该元素的静态 id 来更改 HTML 文档中存在的元素 id，该静态 id 必须是唯一的并且仅文档中可以包含该 id 的单个元素。

以上就是如何使用 JavaScript 更改元素的 ID？的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：JavaScript 中图的实现下一条：如何使用FabricJS获取IText中光标处字符的当前颜色？