admin管理员组

文章数量:1221399

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!

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.

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!

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.

Share Improve this question edited Sep 24, 2010 at 13:10 Sampson 268k76 gold badges545 silver badges568 bronze badges asked Sep 24, 2010 at 13:09 user455141user455141 1832 gold badges3 silver badges7 bronze badges 2
  • Under what browser have you reproduce this case ? – HoLyVieR Commented Sep 24, 2010 at 13:19
  • 2 Has the "obj" been appended to the document? – Alex Commented Sep 24, 2010 at 13:21
Add a comment  | 

7 Answers 7

Reset to default 5

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.

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.

There's no reason this shouldn't work using pure JavaScript. Here's a working fiddle that 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.

Take a look at my above fiddle and try and see what's the difference between your code and mine.

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

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>

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.

Yes you can, here is a solution with jquery

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

or

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

本文标签: domCan I change the ID of an HTML element using JavascriptStack Overflow