Not Able To Append Same Child To Two Div Elements Created By By Javascript

while(i < check){ randImage = retImgNodes(); //return image nodes div1.appendChild(randImage); //append to div1 console.log('appended div1'); randImage2 = rand

Solution 1:

By design, you are not able to place a single element in more than one location in the DOM. If you attempt to do so, the element will be moved from its current location to the location where you are inserting it.

If you desire, you can create a duplicate of a node by using cloneNode(). You can then insert that duplicate into the DOM at a different location.

You might want to read the documentation for documents, nodes, and elements.

For instance the documentation for appendChild() on MDN says (emphasis mine):

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position. The Node.cloneNode() can be used to make a copy of the node before appending it under the new parent. Note that the copies made with cloneNode will not be automatically kept in sync.