JQuery複製DOM節點的方法_jquery

本文實例講述了JQuery複製DOM節點的方法。分享給大家供大家參考。具體分析如下：

複製節點也是常用的DOM操作之一，例如許多購物網站的效果，使用者不僅可以透過點擊商品下方的「選擇」按鈕購買對應的產品，也可以透過滑鼠拖曳商品並將其放到購物車中。這個商品拖曳功能就是用的複製節點，將使用者選擇的商品所處的節點元素複製一次，並將其跟隨滑鼠移動，達到購物效果。

HTML DOM結構如下：

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='C编程'>简单易懂的C编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery'>简单易懂的JQuery编程</li>
</ul>

如果點選

元素後需要再複製一個

元素，可以使用clone()方法來完成。

JQuery程式碼如下：

$(function(){
  $(".nm_ul li").click(function(){
    $(this).clone(true).appendTo(".nm_ul");
    // 复制当前点击的节点，并将它追加到<ul>元素
  }) 
});

在頁面中按一下隨便一項後，清單最下方出現該項目的新節點。

複製節點後，被複製的新元素並不具有任何行為。如果需要新元素也具有複製功能（本例中是按一下事件），可以使用如下JQuery程式碼：

$("ul li").click(function(){ 
 $(this).clone(true).appendTo("ul"); // 注意参数true 
 //可以复制自己，并且他的副本也有同样功能。 
})

在clone()方法中傳遞了一個參數true，它的意義是複製元素的同時複製元素中所綁定的事件。因此該元素的副本也同樣具有複製功能（本例中是按一下事件）。

希望本文所述對大家的jQuery程式設計有所幫助。