jQuery jQuery将DIV复制到另一个DIV中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16068047/
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
jQuery duplicate DIV into another DIV
提问by Dan
Need some jquery help copying a DIV into another DIV and hoping that this is possible. I have the following HTML:
需要一些 jquery 帮助将 DIV 复制到另一个 DIV 并希望这是可能的。我有以下 HTML：
<div class="container">
<div class="button"></div>
</div>
And then I have another DIV in another location in my page and I would like to copy the 'button' div into the following 'package' div:
然后我在页面的另一个位置有另一个 DIV，我想将“按钮”div 复制到以下“包”div：
<div class="package">
Place 'button' div in here
</div>
回答by chrx
You'll want to use the clone()method in order to get a deep copy of the element:
您将需要使用该clone()方法来获取元素的深层副本：
$(function(){
var $button = $('.button').clone();
$('.package').html($button);
});
Full demo: http://jsfiddle.net/3rXjx/
完整演示：http: //jsfiddle.net/3rXjx/
From the jQuery docs:
来自jQuery 文档：
The .clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. When used in conjunction with one of the insertion methods, .clone() is a convenient way to duplicate elements on a page.
.clone() 方法执行匹配元素集的深层复制，这意味着它复制匹配元素及其所有后代元素和文本节点。当与其中一种插入方法结合使用时，.clone() 是一种在页面上复制元素的便捷方式。
回答by Sunny S.M
Copy code using clone and appendTo function :
使用 clone 和 appendTo 函数复制代码：
Here is also working example jsfiddle
这里也是工作示例jsfiddle
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="copy"><a href="http://brightwaay.com">Here</a> </div>
<br/>
<div id="copied"></div>
<script type="text/javascript">
$(function(){
$('#copy').clone().appendTo('#copied');
});
</script>
</body>
</html>
回答by JAVAGeek
You can copy your div like this
你可以像这样复制你的div
$(".package").html($(".button").html())
回答by Muhammad Raheel
Put this on an event
把这个放在一个事件上
$(function(){
$('.package').click(function(){
var content = $('.container').html();
$(this).html(content);
});
});
回答by Developer
$(document).ready(function(){
$("#btn_clone").click(function(){
$("#a_clone").clone().appendTo("#b_clone");
});
}); .container{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}<!DOCTYPE html>
<html>
<head>
<title>jQuery Clone Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<p id="a_clone"><b> This is simple example of clone method.</b></p>
<p id="b_clone"><b>Note:</b>Click The Below button Click Me</p>
<button id="btn_clone">Click Me!</button>
</div>
</body>
</html> 