如何将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元素。同时，我也希望能够在选中并按下删除键时，删除#copied-container中的任何html内容。

- breezy

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/

- mVChr

---

我实现了这个脚本，但它没有将我的图片复制到#copiedimages div中 - 它没有给我任何错误信息。 - breezy

没关系，我已经解决了 - 但这不是我的意图。我喜欢你写的复制我的图片的方法，但假设我想要复制图像的HTML而不是图像本身呢？ - breezy

@mVChr，我还有一个问题-如何删除#copiedimages中最后复制的项目？或者当我选择该项目并按删除键时，它将被删除。 - breezy

Answer 2

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

布尔值是真或假

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

- Gadde

Answer 3

这将是Jquery的克隆功能的一个不错应用：

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

使用clone时，你还可以选择性地复制原始元素的任何数据和事件。我建议给按钮添加一个类，以确保选择正确的元素。

- Matthew Abbott