How can I copy a HTML elements to another Div?

Question

What I want to do is copy an images 'source' or 'html elements' to another div upon clicking on 'copy'. See my example below

<div class="images">
 <img src="imageone.jpg" alt="one" title="one">
</div><!-- end -->
<button>Copy</button>


<div class="images">
 <img src="imageone.jpg" alt="one" title="one">
</div><!-- end -->
<button>Copy</button>

<div class="images">
 <img src="imagethree.jpg" alt="three" title="three">
</div><!-- end -->
<button>Copy</button>

once I press the copy 'buttons' - the image HTML ( not images themselves ) will be copied into this div ( like below - including the alt tags image source and title tag)

<div id="copied-container">
  <div id="copiedimages">
     <img src="imagetwo.jpg" alt="two" title="two">
     <img src="imageone.jpg" alt="one" title="one">
     <img src="imagethree.jpg" alt="three" title="three">
  </div>
 <button>delete</button> <!-- this will remove any images when i select them or highlight them -->
</div>

I'm not worried about my div that contains my images to be copied over, my main concern is to copy the image html attributes

i would also like to have a button be able to remove/delete any images when highlighted by pressing delete. See my above example

Note: To simplify it - I would like to copy an images source, title tag, alt tag into this div so i can then copy the html elements. I would also like to be able to remove any html inside the #copied-container when i highlight and press delete.

Solution 1

$('button').click(function(e){
  $('#copiedimages').append($(this).prev('div.images').html());
});

$('#delete').click(function(e){
    $('#copiedimages').html(' ');
});

Here's a working demo: http://jsfiddle.net/Wsftp/

---

If you want to copy the HTML as text, you can just replace < and > with < and >

$('button:not("#delete")').click(function(e){
  $('#copiedimages').append($(this).prev('div.images').html()
                                   .replace(/\</ig, '&lt;')
                                   .replace(/\>/ig, '&gt;'));
});

See example: http://jsfiddle.net/Wsftp/1/

Solution 2

This would be a nice job for Jquery's clone:

$("button.copy").click(function() {
    $(this).prev().children("img").clone().appendTo("#copiedimages");
});

With clone you can also optionally copy any data and events of the original element. I would also add a class to your buttons to ensure the correct elements are selected.

Solution 3

newdivelement= document.getElementById("olddiv").cloneNode(bool);

bool is true or false

$('#sel').clone().attr('id','newid').appendTo('#newPlace');

Comments

[breezy]

I implemented this script but it doesn't copy my images into my #copiedimages div - it is not giving me any errors.

[breezy]

Never Mind I got it working - but this is not my intention. I like how you wrote to copy my images but lets say i want to copy the HTML OF THE IMAGE and not the Image?

[breezy]

One more quetion for you @mVChr - How can I remove my last copied item in #copiedimages ? or when i select the item and press delete it will be removed.