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

【问题标题】：How do I change the ID of a HTML element with JavaScript?如何使用 JavaScript 更改 HTML 元素的 ID？
【发布时间】：2010-12-11 15:22:13
【问题描述】：

我正在使用 JavaScript 修改 HTML div 元素客户端的 ID。以下代码在 Internet Explorer 中可以正常工作，但在 Firefox/2.0.0.20 中无法正常工作。它确实适用于更新版本的 Firefox。

document.getElementById('one').id = 'two';

谁能告诉我：

为什么这在 FireFox 中不起作用。
如何在 FireFox 中进行这项工作。

为了澄清，我正在更改元素 ID 以引用外部样式表中的不同样式。该样式在IE中应用，在FF中没有。

【问题讨论】：

应该在 Firefox 中找到工作 - 是什么让您认为它不是？
这在 Firefox 中适用于我，您是否收到 JavaScript 错误？你能发布更多的代码示例吗？
下载 Firebug 看看控制台窗口抛出了什么错误
在 FF 3.5.4、WinXP SP 3 上为我工作，Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.1.4) Gecko/20091007 Firefox/3.5.4 (.NET CLR 3.5.30729)
你到底是什么时候做的？您是否确保首先准备好 DOM？尝试使用 window.onload 处理程序或将您的脚本放在所述元素之后。

标签： javascript html cross-browser

【解决方案1】：

它在 Firefox 中确实有效（包括2.0.0.20）。见http://jsbin.com/akili（将/edit添加到要编辑的url）：

<p id="one">One</p>
<a href="#" onclick="document.getElementById('one').id = 'two'; return false">Link2</a>

第一次单击将id 更改为"two"，第二次单击错误，因为现在找不到带有id="one" 的元素！

也许你有另一个元素已经带有id="two"（仅供参考you can't have more than one element with the same id）。

【讨论】：

【解决方案2】：

这似乎对我有用：

<html>
<head><style>
#monkey {color:blue}
#ape {color:purple}
</style></head>
<body>
<span id="monkey" onclick="changeid()">
fruit
</span>
<script>
function changeid ()
{
var e = document.getElementById("monkey");
e.id = "ape";
}
</script>
</body>
</html>

预期的行为是改变单词“fruit”的颜色。

也许当您调用例程时您的文档没有完全加载？

【讨论】：

【解决方案3】：

您可以修改id，而不必使用getElementById

例子：

<div id = 'One' onclick = "One.id = 'Two'; return false;">One</div>

你可以在这里看到它：http://jsbin.com/elikaj/1/

使用 Mozilla Firefox 22 和 Google Chrome 60.0 测试

【讨论】：