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绑定到元素上的数据。