這篇文章主要介紹了JQuery復制DOM節點的方法,涉及jQuery中clone與appendTo方法的使用技巧,需要的朋友可以參考下

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

復制節點也是常用的DOM操作之一，例如很多購物網站的效果，用戶不僅可以通過單擊商品下方的“選擇”按鈕購買相應的產品，也可以通過鼠標拖動商品并將其放到購物車中。這個商品拖動功能就是用的復制節點，將用戶選擇的商品所處的節點元素復制一次，并將其跟隨鼠標移動，從而達到購物效果。

HTML DOM結構如下：

1. <p class="nm_p" title="歡迎訪問武林網" >歡迎訪問武林網</p> 
2. <ul class="nm_ul"> 
3. <li title='PHP編程'>簡單易懂的PHP編程</li> 
4. <li title='C編程'>簡單易懂的C編程</li> 
5. <li title='JavaScript編程'>簡單易懂的JavaScript編程</li> 
6. <li title='JQuery'>簡單易懂的JQuery編程</li> 
7. </ul> 

如果單擊

• 元素后需要再復制一個
• 元素，可以使用clone()方法來完成。

   

  JQuery代碼如下：

   

   

  1. $(function(){ 
  2. $(".nm_ul li").click(function(){ 
  3. $(this).clone(true).appendTo(".nm_ul"); 
  4. // 復制當前點擊的節點，并將它追加到<ul>元素 
  5. })  
  6. }); 

  在頁面中單擊隨便一項后，列表最下方出現該項的新節點。

  復制節點后，被復制的新元素并不具有任何行為。如果需要新元素也具有復制功能(本例中是單擊事件)，可以使用如下JQuery代碼：

   

   

  1. $("ul li").click(function(){  
  2. $(this).clone(true).appendTo("ul"); // 注意參數true  
  3. //可以復制自己，并且他的副本也有同樣功能。  
  4. }) 

  在clone()方法中傳遞了一個參數true，它的含義是復制元素的同時復制元素中所綁定的事件。因此該元素的副本也同樣具有復制功能(本例中是單擊事件)。

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