How do you append an element but also keep it in it's original position?

Question

I'm looking for a way to copy the exact code of an element and move it to another element while keeping it in it's original place also.

I have some JS where basically you click on a picture, the picture will then be appended to a box. However, the picture completely moves. I want the picture to stay as well as be moved to the box as I am looking to grey it out instead of make it disappear.

I don't need specific answers, just a general javascript answer on how I can achieve this, thank you.

Answer 1

您可以通过创建克隆来实现此目的。

$('#div').append($('#image').clone())

Answer 2

Since you are using jQuery have you tried clone() ? - straight from the docs..

$( ".hello" ).clone().appendTo( ".goodbye" );

http://api.jquery.com/clone/

Answer 3

You can get the html of the image and then copy it to the image container:

javascript

function addImageTo(element){
    var oldHTML = element.innerHTML;
    var appendHTML = document.getElementById('yourImage').innerHTML;

    element.innerHTML = oldHTML + appendHTML;
}

JQuery

function addImageTo(element){
    element.append($('#yourImage').innerHTML);
}