js和jquery的clone

节点克隆

对于克隆节点最长用的方法有两种，一、原生JavaScript。 二、使用流行类库。这篇文章里我会说下使用原生Javascript方法和jQuery方法克隆节点。以及，两者的异同点。好了，废话也不多说了，进入主题。。

在说两种实现克隆节点之前，再啰嗦几句基础的概念：影子克隆和深度克隆

var el = document.querySelector('.come-class');

// 影子克隆: 只克隆节点本身
var el2Clone = el.cloneNode( false );

// 深度克隆: 克隆节点以及所有子节点
var elDeepClone = el.cloneNode( true );
   
   
1
2
3
4
5
6
7

---

原生JavaScript方法 : cloneNode()

原生JavaScript给我们提供了一个cloneNode方法来实现克隆节点，该方法被目前所有主流浏览器所支持。使用方式如下：

var el = document.querySelector('wrap'),
    el2Clone = el.cloneNode( true );

// 注意： cloneNode()只是克隆了节点，并没有将其添加到DOM中，所以需要调用原生的appendChild()将其插入DOM树里
documen.body.appendChild.appendChild( el2Clone );
   
   
1
2
3
4
5

需要注意的是，使用原生克隆方法之克隆属性和内联事件，对于通过事件监听器添加的事件并不会克隆。请看下面代码示例：

// 内联事件处理函数，将会被绑定到克隆所得的新节点上
<div onclick="someFunction();"> Click </div>

var el = document.querySelector('.some-class');

// addEventListener函数: 事件将不会被绑定到克隆所得的新节点上
el.addEventListener('click', function( e ) {
    // 用户单点
}， false);

// 元素属性: 事件将不会被绑定到被克隆的节点上
el.onclick = function( e ) {
    // 用户点击
}
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

使用jQuery.clone

虽然，原生的cloneNode方法可以复制节点上的属性，但是却无法复制绑定在节点上的事件。

但是，jQuery库提供的$.clone()正好帮我们解决了原生方法克隆节点的缺点。这也正是使用$.clone()的优势。即$.clone()即可像原生方法那样克隆节点的属性，也可以克隆绑定在节点上的事件。这也就是说那些通过 .bin、 .on、$.click等函数绑定的事件，也能够复制到新的节点之上。

注意： $.clone（）方法总是会进行深度克隆，所以，请谨慎使用这个方法。

使用方法：

var $el = $('.clone-me-please');

// 克隆，不包含数据和事件
var $clone2 = $el.clone( false );

// 克隆，包含数据， 事件和所以节点
var $clone2 = $el.clone( true );

// 克隆，包含数据、时间、但不包含子节点
var $clone3 = $el.clone( true, false );
   
   
1
2
3
4
5
6
7
8
9
10

$.clone()方法不能复制那些不是通过jQuery绑定到元素上的事件，除非是内敛事件处理函数。（如： <div onClick="comeFunction();">）

---

jQuery.clone()函数还能复制通过$.data绑定到元素上的数据。