我可以使用Javascript更改HTML元素的ID吗？

问题描述：

我有javascript变量obj，它表示DOM中的一个元素，我希望更改其ID。我试图通过以下方式来做到这一点，这也说明它不起作用！我可以使用Javascript更改HTML元素的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! }

我上面的代码有什么问题，这意味着id似乎被更改，但没有拿到DOM中？提前谢谢了。

如何分配'obj'？ – 2010-09-24 13:13:49

在什么浏览器你重现这种情况下？ – HoLyVieR 2010-09-24 13:19:51

是否已将“obj”附加到文档中？ – Alex 2010-09-24 13:21:00

答

您显示的代码确实有效;问题可能出现在查找并指定obj的代码中。我的猜测是，这只是一个javascript对象，不是DOM树的一部分。

谢谢 - 那正是问题！ – user455141 2010-09-24 14:29:06

答

可以呀，这里是用jQuery的解决方案

$("#xxx").attr("id", "yyy");

或

getElementById("xxx").setAttribute("id", "yyy");

-1 OP没有指定他们想要使用jQuery，这应该可以使用纯JavaScript实现。这并没有回答他为什么改变id的问题，但是它并没有被'getElementById'找到。 – GenericTypeTea 2010-09-24 13:13:20

javascript相当于obj.setAttribute（“id”，“yourid”） – Tim 2010-09-24 13:13:53

@Tim，实际上是'obj.id =“foo”;'是最简单的等价物。 – GenericTypeTea 2010-09-24 13:15:43

答

没有理由这不应该使用纯JavaScript工作。这是一个working fiddle，显示它正在工作。您不应该需要jQuery解决方案或任何其他JavaScript方法，id = "foo";是更改DOM对象ID的最简单方法。

看看我的上面的小提琴，试试看看你的代码和我的代码有什么区别。

答

既然你不给我们整个代码我的猜测是，你可能有类似这样的东西在你的代码

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! }

在这种特殊情况下，document.getElementById("newID")不会回报你，因为任何元素未添加到页面，因此在页面中找不到。

答

试试这个：

对我的作品

<!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>

不要在'onclick'属性中使用'javascript：';它没用（实际上，你只是以这种方式分配JavaScript标签）。 – 2010-09-24 13:29:31

刚刚明确。已编辑并删除。 – jimplode 2010-09-24 13:34:30

答

您的代码看起来不错，但如果你正在评论在您的代码，这样，你就可以实现支架是永远不会关闭，由于该评论。

if (element != null) { alert("Hooray"); // this alert never gets displayed! } <-- this brace

+1 - 非常棒！ – 2014-08-20 01:15:36

答

还有一件事要考虑。您是否在DOM准备好之前尝试做到这一点？该元素是否已加载？如果您尝试更改DOM中树中没有的元素，您将悄然失败。

我可以使用Javascript更改HTML元素的ID吗？

相关推荐