Setting an attribute of a child <div> inside a cloned Node

Question

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?)

Answer 1

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

Answer 2

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.