javascript 如何将 HTML 元素复制到另一个 Div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5940927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I copy a HTML elements to another Div?
提问by breezy
What I want to do is copy an images 'source' or 'html elements' to another div upon clicking on 'copy'. See my example below
我想要做的是在单击“复制”时将图像“源”或“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>
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)
一旦我按下复制“按钮” - 图像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>
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
我不担心包含要复制的图像的 div，我主要关心的是复制图像 html 属性
i would also like to have a button be able to remove/delete any images when highlighted by pressing delete. See my above example
我还希望有一个按钮能够在按删除突出显示时删除/删除任何图像。看我上面的例子
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.
注意：为了简化它 - 我想将图像源、标题标签、alt 标签复制到这个 div 中，以便我可以复制 html 元素。当我突出显示并按删除时，我还希望能够删除 #copied-container 中的任何 html。
回答by mVChr
$('button').click(function(e){
$('#copiedimages').append($(this).prev('div.images').html());
});
$('#delete').click(function(e){
$('#copiedimages').html(' ');
});
Here's a working demo: http://jsfiddle.net/Wsftp/
这是一个工作演示：http: //jsfiddle.net/Wsftp/
If you want to copy the HTML as text, you can just replace <and >with < and >
如果要将 HTML 复制为文本，只需将<和替换>为 < 和 >
$('button:not("#delete")').click(function(e){
$('#copiedimages').append($(this).prev('div.images').html()
.replace(/\</ig, '<')
.replace(/\>/ig, '>'));
});
See example: http://jsfiddle.net/Wsftp/1/
参见示例：http: //jsfiddle.net/Wsftp/1/
回答by Matthew Abbott
This would be a nice job for Jquery's clone:
对于 Jquery 的克隆来说，这将是一项不错的工作：
$("button.copy").click(function() {
$(this).prev().children("img").clone().appendTo("#copiedimages");
});
With clone you can also optionally copy any data and events of the original element. I would also add a class to your buttons to ensure the correct elements are selected.
使用克隆，您还可以选择复制原始元素的任何数据和事件。我还会为您的按钮添加一个类，以确保选择了正确的元素。
回答by Gadde
newdivelement= document.getElementById("olddiv").cloneNode(bool);
bool is true or false
bool 是真还是假
$('#sel').clone().attr('id','newid').appendTo('#newPlace');
