jQuery文档操作-复制

.clone(  [withDataAndEvents]  )

创建匹配的元素深复制

.clone([withDataAndEvents])

.clone([withDataAndEvents][,deepWithDataAndEvents])

withDataAndEvents

类型是布尔值，默认值是false。

一个布尔值指示事件句柄和数据是否和元素一起被复制。jQuery1.4中，元素数据会同时被拷贝。在jQuery1.5中默认的值是错误的true;在jQuery1.5.1+版本中被改了回来。

deepWithDataAndEvents

类型是布尔值。默认是withDataAndEvents的值。

一个布尔值指示该克隆对象的所有孩子的事件句柄和数据是否被拷贝。默认它的值会匹配第一个参数的值（默认值是false）。

.clone()方法对匹配的元素进行了深复制，意味着它复制匹配的元素的所有的子孙元素和文本节点。当和插入操作的方法一起使用时，.clone()是一种方便的方式来复制页面上的元素。如下html：

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

一般当元素被在文档中插入操作时，它是从原来的地方移动过去，如下代码：

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

Note：当使用.clone()方法时，你能够在将他们插入到文档中之前，改变复制的元素或者他们的内容。

一般，任何被绑定在原始元素上的事件句柄不会被复制。可选择的withDataAndEvents参数允许我们进行复制，并且可以复制所有的事件句柄绑定在新复制的元素上。jQuery1.4中，所有的元素的data(通过.data()方法被添加)也会被复制到新副本中。

然而，元素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

jQuery1.5中，withDataAndEvents 能可选择的使用deepWithDataAndEvents来增强对元素的所有孩子的事件和data的复制。

Note：使用.clone()会产生具有重复id属性的不好效果，这些id属性的值需要是唯一的。如果可能，推荐避免使用这个属性进行复制或者使用class属性来标识元素。

<script>
//复制所有的b元素（并且选择复制），将他们添加到所有段落的前面
 $("b").clone().prependTo("p");
</script>

<script>//当使用.clone()复制没有被附加到DOM上的元素集合，当插入DOM自己哦那个的时候他们的顺序不能得到保证。然而，可能可以在工作区进行保护性的排序，就像演示的一样
// 排列的顺序会有所不同，不同的浏览器会有所不同
$('#copy').append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('foo - ')
          .parent()
          .clone()); 
// 当顺序固定时，正确的处理方式
$('#copy-correct')
          .append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('bar - ')
          .end()); 
</script>