如何将HTML元素复制到另一个Div？ [英] How can I copy a HTML elements to another Div?

问题描述

我想要做的是在点击复制时将图片的源或html元素复制到另一个div。请参阅下面的示例

What I want to do is copy an images 'source' or 'html elements' to another div upon clicking on 'copy'. See my example below

<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标签图片来源和标题标签）

once I press the copy 'buttons' - the image HTML ( not images themselves ) will be copied into this div ( like below - including the alt tags image source and title tag)

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

I'm not worried about my div that contains my images to be copied over, my main concern is to copy the image html attributes

我也希望有一个按钮能够删除/删除任何图像时，通过按删除高亮显示。请参阅我上述示例

i would also like to have a button be able to remove/delete any images when highlighted by pressing delete. See my above example

注意：为了简化，我想将图片来源，标题标签，alt标签复制到此div我可以然后复制html元素。

Note: To simplify it - I would like to copy an images source, title tag, alt tag into this div so i can then copy the html elements. I would also like to be able to remove any html inside the #copied-container when i highlight and press delete.

推荐答案

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

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

这是一个工作演示： http://jsfiddle.net/Wsftp/

如果您要将HTML复制为文字，您可以用& lt; 替换< 和> 和& gt;

If you want to copy the HTML as text, you can just replace < and > with < and >

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

查看示例： http://jsfiddle.net/Wsftp/1/

这篇关于如何将HTML元素复制到另一个Div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！