I have cloned a node, but i want to set or change an attribute of a div inside that cloned node, specifically, change the id of div id="test0"

I can't find any documentation out there on this, any straight JavaScript guys out there know a solution?

var c = document.getElementById("stone-opt0"),
cloned = c.cloneNode(true);

//CODE THAT DOESN'T WORK
cloned.getElementById("test0").id = "new-id";

What I am doing is looping through a large list of items, and placing these items into a document fragment, which i then push to the page once... I am doing this rather than adding each element to the page, then modifying after attaching to the DOM (which would be faster, no?)

I have cloned a node, but i want to set or change an attribute of a div inside that cloned node, specifically, change the id of div id="test0"

I can't find any documentation out there on this, any straight JavaScript guys out there know a solution?

var c = document.getElementById("stone-opt0"),
cloned = c.cloneNode(true);

//CODE THAT DOESN'T WORK
cloned.getElementById("test0").id = "new-id";

What I am doing is looping through a large list of items, and placing these items into a document fragment, which i then push to the page once... I am doing this rather than adding each element to the page, then modifying after attaching to the DOM (which would be faster, no?)

• javascript
• clone
• clonenode

• 1 Why in the world would you tag your question as jquery and then say "No jQuery!"... – James Montagne Commented Sep 14, 2012 at 20:29
• i did that to try and get more javascript people to view the question. i removed it now. – Joel Grannas Commented Sep 14, 2012 at 20:36

2 Answers 2

You're trying to call getElementById on the context of an element node. This is not possible: the getElementById method exists only on the document node (because id values have to be unique to the document). By contrast, you can do getElementsByTagName or querySelectorAll based on the context of an element.

You could, therefore, use the querySelectorAll method to do this, as long as you don't mind not supporting browsers that don't support this method, e.g. IE8.

cloned.querySelectorAll('[id="test0"]')[0].id = "new-id";

Have you tried doing cloned.getElementById("test0").id = "new-id" after you attach cloned to the DOM? getElementById() can be finicky if you're looking for something that's not part of the DOM. And when I say "finicky", I mean "generally flat out doesn't work."

You might try creating a hidden element (like a <div style="display:none">) on the page and attaching cloned to that so that it doesn't show up on the page until you're ready.