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复制为文字，则只需将<和>替换为＆amp; lt;和＆amp; gt;

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

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

Answer 2

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

bool是真还是假

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

Answer 3

对于Jquery的克隆来说，这将是一个不错的工作：

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

使用clone，您还可以选择复制原始元素的任何数据和事件。我还会在按钮中添加一个类，以确保选择正确的元素。

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

3 个答案: