我可以使用 Javascript 更改 HTML 元素的 ID 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3787369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I change the ID of an HTML element using Javascript?
提问by user455141
I have javascript variable obj which represents an element in the DOM and I wish to change its ID. I have attempted to do this by the following, which also illustrates that it does not work!
我有一个 javascript 变量 obj，它代表 DOM 中的一个元素，我希望更改它的 ID。我试图通过以下方式做到这一点，这也说明它不起作用！
obj.id = "newID";
alert(obj.id); // this gives me newID as required
var element = document.getElementById("newID");
if (element != null) { alert("Hooray"); // this alert never gets displayed! }
What is wrong with my code above that means that the id seems to be changed but not picked up in the DOM? Many thanks in advance.
我上面的代码有什么问题，这意味着 id 似乎已更改但未在 DOM 中获取？提前谢谢了。
采纳答案by Aaron Digulla
The code you show does work; the problem is probably in the code which looks up and assigns obj. My guess is that this is just a javascript object, not a part of the DOM tree.
您显示的代码确实有效；问题可能出在查找和分配的代码中obj。我的猜测是这只是一个 javascript 对象，而不是 DOM 树的一部分。
回答by HoLyVieR
Since you haven't give us the whole code my guess is that you probably have something similar to this in your code
由于您还没有给我们完整的代码，我的猜测是您的代码中可能有类似的内容
obj = document.createElement("div");
obj.id = "something";
// ...
obj.id = "newID";
alert(obj.id); // this gives me newID as required
var element = document.getElementById("newID");
if (element != null) { alert("Hooray"); // this alert never gets displayed! }
In that particular case, document.getElementById("newID")won't return you anything since the element wasn't added to the page and therefore it is not found in the page.
在这种特殊情况下，document.getElementById("newID")不会返回任何内容，因为该元素未添加到页面中，因此未在页面中找到。
回答by djdd87
There's no reason this shouldn't work using pure JavaScript. Here's a working fiddlethat shows it working. You shouldn't need a jQuery solution or any other JavaScript method, id = "foo";is the simplest way of changing a DOM Objects ID.
没有理由这不应该使用纯 JavaScript 工作。这是一个显示它工作的工作小提琴。您不应该需要 jQuery 解决方案或任何其他 JavaScript 方法，这id = "foo";是更改 DOM 对象 ID 的最简单方法。
Take a look at my above fiddle and try and see what's the difference between your code and mine.
看看我上面的小提琴，试着看看你的代码和我的有什么区别。
回答by dytrivedi
Your code looks fine, although if you are commenting that way in your code, you can realize that the brace is never closed due to the comment.
您的代码看起来不错，但如果您在代码中以这种方式进行注释，您会意识到大括号永远不会因注释而关闭。
if (element != null) { alert("Hooray"); // this alert never gets displayed! } <-- this brace
回答by AutoSponge
There's another thing to consider. Are you trying to do this before the DOM is ready? Is that element loaded yet? If you try to change an element that the DOM doesn't have in the tree you will quietly fail.
还有另一件事需要考虑。您是否要在 DOM 准备好之前执行此操作？该元素是否已加载？如果您尝试更改 DOM 树中没有的元素，您将悄悄地失败。
回答by jimplode
Try this:
试试这个：
Works for me
对我有用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
function ChangeID(elementId, newId) {
var obj = document.getElementById(elementId);
obj.id = newId;
}
function SetContent(elementId, content) {
var obj = document.getElementById(elementId);
obj.innerHTML = content;
}
</script>
<div id="div1"></div>
<a href="#" onclick="ChangeID('div1', 'div6');">ChangeID</a><br />
<a href="#" onclick="SetContent('div6', 'this is the contents');">Set Contents</a>
</body>
</html>
回答by Fribu - Smart Solutions
Yes you can, here is a solution with jquery
是的，你可以，这是 jquery 的解决方案
$("#xxx").attr("id", "yyy");
or
或者
getElementById("xxx").setAttribute("id", "yyy");
