javascript - 如何将 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。

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/