Search code examples
javascriptcloneclonenode

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

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

Solution

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