一般来说，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。< /p>
-
第 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？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用 JavaScript 更改元素的 ID？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
