返回值:jQueryclone([withDataAndEvents])

对匹配的元素进行深层拷贝。

.clone() 方法会对匹配的元素进行深拷贝。也就是说，该方法会拷贝匹配元素以及匹配元素的所有后代元素及文本节点。当 .clone() 方法与插入类相关的方法一起使用时，可以很方便的创建页面元素的复本。例如，有如下 HTML： 

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

插入类相关的方法，在这里我们选择 .append() 。通常情况下，将某元素插入到 DOM 的某处时，意味着是将该元素从原来的位置移动到待插入位置。因此，如果执行完下面的代码： 

$('.hello').appendTo('.goodbye');

我们会得到如下的 DOM 结构：

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

为了防止这种现象发生，我们可以先对待插入元素进行深拷贝，然后再进行插入操作。所以我们可以按下面这样做：

$('.hello').clone().appendTo('.goodbye');

得到的结果如下：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

注意： 当使用 .clone() 方法时，在向文档中插入或再插入之前，你可以修改克隆后的元素或者是其内容。

通常情况下，不会对绑定在匹配元素上的任何事件进行深拷贝。withDataAndEvents 参数允许我们改变这种默认行为，从而可以对事件进行拷贝，并将其绑定到新生成的对象上。从 jQuery 1.4 开始，所有的元素数据(通过 .data() 方法添加的)，也会被拷贝到新生成的对象上。

但是，如果元素数据中包含对象和数组的话，这些数据是不会被拷贝的。对于被克隆的元素以及克隆生成的新元素而言，这些数据依然是被共享的。如果同样要对这些数据进行深拷贝的话，请手动一个一个的进行拷贝，例如：

var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
    $clone = $elem.clone( true )
    .data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing

从 jQuery 1.5 开始,使用 withDataAndEvents 参数时，也可以使用增强的 deepWithDataAndEvents 参数，实现对所有子元素的事件和数据的拷贝。

注意： 在使用 .clone() 生成含有 id 属性元素的副本时会有副作用，因为该元素本应该是唯一的元素。所以，应该尽可能的避免克隆含有 id 属性的元素或者使用 class 属性作为标识符进行替代。

示例:

克隆所有的 b 元素 (并且选中这些克隆元素)，并将它们添加到段落标签内的起始位置。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>


  <b>Hello</b><p>, how are you?</p>


<script>


  $("b").clone().prependTo("p");


</script>
</body>
</html>

演示:

示例:

当使用 .clone() 克隆一组元素，并且这些克隆生成的元素尚未被添加到 DOM 中，那么当这些元素被插入到 DOM 中时，不能保证是按它们的原顺序被插入的。但是，可以像下面例子中提到的那样，保证顺序的正确性：

<!DOCTYPE html>
<html>
<head>
<style>
  #orig, #copy, #copy-correct {
    float: left;
    width: 20%;
  }
</style>
<script src="jquery.min.js"></script>
</head>
<body>


<div id="orig">
    <div class="elem"><a>1</a></div>
    <div class="elem"><a>2</a></div>
    <div class="elem"><a>3</a></div>
    <div class="elem"><a>4</a></div>
    <div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>


<script>


// sort order is not guaranteed here and may vary with browser  
$('#copy').append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('foo - ')
          .parent()
          .clone()); 
 
// correct way to approach where order is maintained
$('#copy-correct')
          .append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('bar - ')
          .end()); 


</script>
</body>
</html>

演示: