我可以使用Javascript更改HTML元素的ID吗？
[英]Can I change the ID of an HTML element using Javascript?
问题描述
I have javascript variable obj which represents an element in the DOM and I wish to change its ID. 
我有javascript变量obj，它代表DOM中的一个元素，我希望更改它的ID。 I have attempted to do this by the following, which also illustrates that it does not work! 我试图通过以下方式做到这一点，这也说明它不起作用！
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? 上面我的代码有什么问题，这意味着id似乎被改变但在DOM中没有被提取？ Many thanks in advance. 提前谢谢了。
7 个解决方案
解决方案1
5 2010-09-24 13:19:25
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")将不会返回任何内容，因为元素未添加到页面中，因此在页面中找不到它。
解决方案2
3 2010-09-24 13:18:29
There's no reason this shouldn't work using pure JavaScript. 没有理由这不应该使用纯JavaScript。 Here's a working fiddle that shows it working. 这是一个工作小提琴 ，显示它的工作。 You shouldn't need a jQuery solution or any other JavaScript method, id = "foo"; 你不应该需要一个jQuery解决方案或任何其他JavaScript方法， id = "foo"; is the simplest way of changing a DOM Objects ID. 是更改DOM对象ID的最简单方法。
Take a look at my above fiddle and try and see what's the difference between your code and mine. 看看我上面的小提琴，试着看看你的代码和我的代码有什么区别。
解决方案3
3 已采纳 2010-09-24 13:21:43
The code you show does work; 你展示的代码确实有用; the problem is probably in the code which looks up and assigns obj . 问题可能出在查找和分配obj的代码中。 My guess is that this is just a javascript object, not a part of the DOM tree. 我的猜测是，这只是一个javascript对象，而不是DOM树的一部分。
解决方案4
1 2010-09-24 13:47:29
您的代码看起来很好，但如果您在代码中以这种方式进行评论，您可以意识到由于注释，括号永远不会关闭。
if (element != null) { alert("Hooray"); // this alert never gets displayed! } <-- this brace
解决方案5
0 2010-09-24 13:24:43
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>
解决方案6
0 2010-09-24 18:03:10
There's another thing to consider. 还有另外一件事要考虑。 Are you trying to do this before the DOM is ready? 在DOM准备好之前，您是否尝试这样做？ 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在树中没有的元素，您将悄然失败。
解决方案7
-2 2010-09-24 13:11:48
Yes you can, here is a solution with jquery 是的，你可以，这是一个jquery的解决方案
$("#xxx").attr("id", "yyy");
or 要么
getElementById("xxx").setAttribute("id", "yyy");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.