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

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

javascript dom

我可以使用Javascript更改HTML元素的ID吗？,javascript,dom,getelementbyid,Javascript,Dom,Getelementbyid,我有一个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 ge

我有一个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! }

我上面的代码有什么问题，这意味着id似乎已更改，但在DOM中未被拾取？非常感谢。

是的，您可以，这里有一个使用jquery的解决方案

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

或

使用纯JavaScript没有理由不起作用。这是一个显示它工作的例子。您不需要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”）

不会返回任何内容，因为元素没有添加到页面中，因此在页面中找不到它。

您显示的代码确实有效；问题可能出在查找并分配

obj

的代码中。我猜这只是一个javascript对象，而不是DOM树的一部分。

试试这个：

为我工作

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


测试
函数ChangeID（elementId，newId）{
var obj=document.getElementById（elementId）；
obj.id=newId；
}
函数SetContent（elementId，content）{
var obj=document.getElementById（elementId）；
obj.innerHTML=内容；
}

您的代码看起来不错，但如果您在代码中以这种方式进行注释，您可以意识到大括号永远不会因为注释而关闭

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

<代码>如果（元素！= null）{警报（“HoRayy”）；/ /这个警报永远不会显示！} P.>还有另外一件事要考虑。您是否试图在DOM准备好之前执行此操作？那个元素加载了吗？如果您试图更改DOM在树中没有的元素，您将悄悄失败。

-1 OP没有指定他们要使用jQuery，这应该可以使用纯JavaScript实现。这并没有回答他为什么要更改id的问题，但是

getElementById

没有再次找到它。javascript等价物是obj.setAttribute（“id”，“yourid”）@Tim，实际上是

obj.id=“foo”

是最简单的等价物。@Tim:不要使用

setAttribute

来更改DOM元素的

id

，即会发疯的…在什么浏览器下重现此情况？文档中是否附加了“obj”？不要在

onclick

属性中使用

javascript:

；这是没有用的（实际上，您只是以这种方式分配JavaScript标签）。

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