Setting an attribute of a child <div> inside a cloned Node
-
02-07-2021 - |
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?)
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";
OTHER TIPS
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.