Can I change the ID of an HTML element using Javascript?

Question

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.

Under what browser have you reproduce this case ? – HoLyVieR Sep 24 '10 at 13:19 — HoLyVieR, Sep 24 '10 at 13:19
Has the "obj" been appended to the document? – Alex Sep 24 '10 at 13:21 — Alex, Sep 24 '10 at 13:21

score 5 · Answer 1 · answered Sep 24 '10 at 13:19

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.

score 3 · Answer 2 · answered Sep 24 '10 at 13:18

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.

score 3 · Accepted Answer · answered Sep 24 '10 at 13:21

3

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.

answered Sep 24 '10 at 13:21

Aaron Digulla

321,842
108
597
820

score 1 · Answer 4 · answered Sep 24 '10 at 13:47

1

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

answered Sep 24 '10 at 13:47

dytrivedi

56
4

jimplode · Answer 5 · 2010-09-24T13:34:07.013

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>

Don't use `javascript:` in `onclick` attributes; it's useless (actually, you're merely assigning a JavaScript label this way). — Marcel Korpel, Sep 24 '10 at 13:29

score 0 · Answer 6 · answered Sep 24 '10 at 18:03

0

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.

answered Sep 24 '10 at 18:03

AutoSponge

1,444
10
7

score -2 · Answer 7 · answered Sep 24 '10 at 13:11

-2

Yes you can, here is a solution with jquery

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

or

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

answered Sep 24 '10 at 13:11

Alexander_F

2,831
3
28
61

5

-1 The OP hasn't specified they want to use jQuery and this should be achievable using pure JavaScript. This isn't answering his question as to why the id is changed, but it's not found again by `getElementById`. – djdd87 Sep 24 '10 at 13:13
the javascript equivalent is obj.setAttribute("id","yourid") – Tim Sep 24 '10 at 13:13
@Tim, actually `obj.id="foo";` is the simplest equivalent. – djdd87 Sep 24 '10 at 13:15
2

@Tim: don't use `setAttribute` to change the `id` of a DOM element, IE will freak out... – Marcel Korpel Sep 24 '10 at 13:16

Can I change the ID of an HTML element using Javascript?

7 Answers7

Linked