jQuery 将 DIV 复制到另一个 DIV答案

【问题标题】：jQuery duplicate DIV into another DIVjQuery 将 DIV 复制到另一个 DIV
【发布时间】：2013-04-17 19:02:59
【问题描述】：

需要一些 jquery 帮助将一个 DIV 复制到另一个 DIV 并希望这是可能的。我有以下 HTML：

  <div class="container">
  <div class="button"></div>
  </div>

然后我在页面的另一个位置有另一个 DIV，我想将“按钮”div 复制到以下“包”div 中：

<div class="package">

Place 'button' div in here

</div>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您需要使用clone() 方法来获取元素的深层副本：

$(function(){
  var $button = $('.button').clone();
  $('.package').html($button);
});

完整演示：http://jsfiddle.net/3rXjx/

来自jQuery docs：

.clone() 方法执行匹配集的深层复制元素，这意味着它复制匹配的元素以及所有它们的后代元素和文本节点。配合使用时使用其中一种插入方法， .clone() 是一种方便的方法页面上的重复元素。

【讨论】：

这不会保留用户在输入中添加的值。
你能告诉我为什么我们需要$ in var $button。我相信 js 你可以简单地将 var 声明为 var button 。
@KNU 这不是必需的，但它是 jQuery 世界中的常见约定。它表明 $button 变量是一个 jQuery 对象。见stackoverflow.com/questions/205853/…

【解决方案2】：

使用 clone 和 appendTo 函数复制代码：

这里也是工作示例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>

【讨论】：

【解决方案3】：

你可以像这样复制你的 div

$(".package").html($(".button").html())

【讨论】：

【解决方案4】：

把它放在一个事件上

$(function(){
    $('.package').click(function(){
       var content = $('.container').html();
       $(this).html(content);
    });
});

【讨论】：

【解决方案5】：

$(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>

For more detail and demo

【讨论】：