如何将HTML元素复制到另一个Div？

Question

我想要做的是在点击"复制"后将图像'源'或'html元素'复制到另一个div.请参阅下面的示例

<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>

一旦我按下复制'按钮' - 图像HTML(不是图像本身)将被复制到这个div中(如下所示 - 包括alt标签图像源和标题标签)

<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>

我并不担心我的div包含我要复制的图像,我主要担心的是复制图像html属性

我还希望有一个按钮能够通过按删除突出显示删除/删除任何图像.看我上面的例子

注意:为了简化它 - 我想将图像源,标题标签,alt标签复制到此div中,以便我可以复制html元素.当我突出显示并按下删除时,我还希望能够删除#retered-container中的任何html.

Answer 1

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

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

这是一个有效的演示:http://jsfiddle.net/Wsftp/

如果你要复制的HTML文本,只需更换<并>以< 和>

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

参见示例:http://jsfiddle.net/Wsftp/1/