ansaurus

Question

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

Answer 1

A:

Yes you can, here is a solution with jquery

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

or

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

Fincha 2010-09-24 13:11:48

-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`.

GenericTypeTea 2010-09-24 13:13:20

the javascript equivalent is obj.setAttribute("id","yourid")

Tim 2010-09-24 13:13:53

@Tim, actually `obj.id="foo";` is the simplest equivalent.

GenericTypeTea 2010-09-24 13:15:43

@Tim: don't use `setAttribute` to change the `id` of a DOM element, IE will freak out...

Marcel Korpel 2010-09-24 13:16:23

Answer 2

A:

Try this:

obj.setAttribute('id','new_id');

Spudley 2010-09-24 13:14:24

see above comments.

Tim 2010-09-24 13:17:42

Answer 3

+1 A:

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.

GenericTypeTea 2010-09-24 13:18:29

Answer 4

+4 A:

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.

HoLyVieR 2010-09-24 13:19:25

Answer 5

A:

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.

Aaron Digulla 2010-09-24 13:21:43

thank you - that was exactly the problem!

2010-09-24 14:29:06

Answer 6

A:

Try this:

Works for me

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<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>

jimplode 2010-09-24 13:24:43

Don't use `javascript:` in `onclick` attributes; it's useless (actually, you're merely assigning a JavaScript label this way).

Marcel Korpel 2010-09-24 13:29:31

was just being explicit. have edited and removed.

jimplode 2010-09-24 13:34:30

Answer 7

A:

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

dytrivedi 2010-09-24 13:47:29

Answer 8

A:

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.

AutoSponge 2010-09-24 18:03:10

ansaurus

tags:

views:

answers:

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

related questions