How can I copy a HTML elements to another Div?

问题

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.

回答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/

回答2:

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

bool is true or false

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

回答3:

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.

来源：https://stackoverflow.com/questions/5940927/how-can-i-copy-a-html-elements-to-another-div

标签

javascript

jquery

css

xhtml