In one of the projects I'm working on, i needed to have new elements containing a lot of elements. I had already created one element and styled it. But i needed the content to be dynamically updated from a .json file.
So, I thought of a way to duplicate that element and give each its own unique content. Using the Node.cloneNode() method.
It's pretty straight foward
First, you declare and assign your node, the element you want to clone
var node = document.querySelector("#element");
Declare your clone
var clone = node.cloneNode([deep])
You can set the [deep] to be true if you want to copy the children of the node
Set to false if you don't
Now, you can append it into your DOM
document.getElementById("#papa").appendChild(clone);
Enjoy! 😁
These sites explain it way better!
https://www.w3schools.com/jsref/met_node_clonenode.asp
https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
By the way, this is my first post, I apologize for it's awkwardness 🙂
Top comments (0)