在jQuery中，如果我們想要復制某個節點，可以使用clone()方法。
語法：
$(A).clone()
說明：
其中clone()方法有一個布爾參數，默認值為false。
$(A).clone()表示僅僅將A節點復制，但不復制A節點所綁定的事件。
$(A).clone(true)表示將A節點復制，並且復制A節點所綁定的事件。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("li").click(function () {
var txt = $(this).text();
alert(txt);
});
$("#btn").click(function () {
var $li = $("ul li:eq(3)").clone(true);
$($li).appendTo("ul");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
<input id="btn" type="button" value="clone復制" />
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“復制”按鈕之後，預覽效果如下：
分析：
在這個例子中，我們為li元素綁定了一個click事件。$("ul li:eq(3)").clone(true)表示復制所選的li元素，並且復制該li元素所綁定的事件。因此，當我們點擊“復制”按鈕之後，復制過去的li元素還保留之前所綁定的click事件。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").click(function () {
$(this).clone().appendTo("ul");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
我們隨便點擊其中一個列表項，該列表項會被復制，並且添加到ul元素內部末尾。
$(this).clone().appendTo("ul")表示選擇當前的li元素（$(this)），然後將這個li元素復制（clone()），最後將被復制的li元素添加到ul元素內部末尾（appendTo()）。這句代碼使用了jQuery“鏈式操作”，實際上等價於：
var $li = $(this).clone();
$($li).appendTo("ul");
如果“同一個”jQuery對象有N個操作，我們就可以使用像上面這種“鏈式操作”的方式。對於“jQuery鏈式操作”這個技巧，我們會在後面教程會詳細給大家介紹。