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

我想要做的是复制一个图像的'源'或'html元素'点击'复制'后，另一个div。见下面如何将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，当我突出显示并按删除。

来源

2011-05-09 breezy

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

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

这里的工作演示：http://jsfiddle.net/Wsftp/

如果你要复制的HTML文本，只需更换<和>与& LT;和& 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/

来源

2011-05-09 18:33:05 mVChr

我实现了这个剧本，但它并没有我的图片复制到我的#copiedimages格 - 它不给我任何错误。 – breezy 2011-05-09 20:38:06

永远不要我知道它的工作 - 但这不是我的意图。我喜欢你如何写复制我的图像，但让我说我想复制图像的HTML而不是图像？ – breezy 2011-05-09 20:59:42

已更新的答案。 – mVChr 2011-05-09 21:11:32

这将是jQuery的克隆了很好的工作：

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

随着克隆，也可以选择复制任何数据和原始元素的事件。我也会为你的按钮添加一个类，以确保选择正确的元素。

来源

2011-05-09 18:39:30

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

布尔是真的还是假

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

来源

2012-11-01 10:47:44 Gadde

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

回答

相关问题