How to copy elements from one container to another in javascript?

Question

How to copy elements from one container to another in javascript?

Navigation

#1 by (1 votes)

1

I am working on a web service with HTML, CSS and JavaScript. I have a list in a certain one with a fork where each item in the list is an image. In each of these images you can click.

The idea then is that you can click on each image and pass them to a new container.

HTML code with the image list:

<ul>
   <li id="primerImagen">
    <input type="image" src="pictures/primerImagen.png">
   </li>
   <li id="segundaImagen">
     <input type="image" src="pictures/segundaImagen.png">
   </li>
   <li id="tercerImagen">
     <input type="image" src="pictures/tercerImagen.png">
   </li>
</ul>

In the following way, I achieve that the images appear in a new box

var contenedor = document.getElementById("tableBox2");
document.querySelectorAll('input[type="image"]').forEach(function(image) {
  var imagenes = document.createElement("image");
  image.addEventListener("click", function(e) {
    contenedor.appendChild(this);
  });
});

The problem is that I'm not making the images go from one place to another without removing them from the original list. Any suggestions on how to achieve this?

javascript

asked by Guillermo Noblega 11.10.2018 в 23:45

source

1 answer

Save to output file .txt There is some way to put this MySqli query together

score 1 · Accepted Answer

If you want to pass the image to another container without being removed from the first, you must create a copy of the first and add it to your second container, the cloneNode () It will be useful:

contenedor.appendChild(this.cloneNode());

This way you do not reassign the node, but you create a copy and you add it to another container.

You can find more info Here . I hope I have helped you.