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


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.

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.


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.


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");