jQuery移動和複製dom節點實用DOM操作案例_jquery

本文章簡單的介紹了關於jQuery移動和複製dom節點程式實現，有需要學習的朋友可參考參考。

做一個專案時，需要dom節點移動，如下列程式碼：

複製程式碼 程式碼如下:

需要把p標籤移到div標籤裡，經過測試發現，在jQuery中移動dom節點非常方便：

複製程式碼 程式碼如下:

$('div'). ($('p'))

這樣即可把p標籤移到div標籤裡，千萬不要寫成這樣：

複製程式碼 程式碼如下:

$('div').append( $('p').html() )

這樣只是把p標籤裡的內容複製到div標籤裡。

如果只是複製一份到div標籤裡，原來的標籤還保留著，那麼可以這麼寫：

複製程式碼 代碼如下:

$('div').append( $('p').clone(true))

例

複製程式碼 程式碼如下:

$(function(){
$(".nm_ul li"). click(function(){
$(this).clone(true).appendTo(".nm_ul"); // 複製目前點擊的節點，並將它追加到

元素
})
});

而且當clone參數設為true時還可以將按鈕上綁定的事件一起複製到新按鈕上

在clone()方法中傳遞了一個參數true，它的意義是複製元素的同時複製元素中所綁定的事件。因此該元素的副本也同樣具有複製功能。如果不希望事件也被複製，可以這樣寫：

複製程式碼 程式碼如下:

程式碼如下:

程式碼如下:

程式碼如下:$('div').append( $('p').clone())

移動節點
將頁面上的一個節點移到另外一個地方可以用jq的內部和外部插入方法(append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore),直接將選取的節點傳遞進去就可以實現移動




複製代碼

代碼如下:


Move Me!

實例$("button").click(function(){ $(this).appendTo($("#box")); //或用append $(" #box").append(this); });

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




複製程式碼

程式碼如下: 程式碼如下:

歡迎訪問腳本之家圖書館

• 簡單易懂的PHP魔法
• 簡單易懂的C魔法
• 簡單易懂的JavaScript魔法
• 簡單易懂的JQuery魔法

如果點擊

元素後需要再複製一個

元素，可以使用clone()方法來完成，先來看看效果：
效果演示
歡迎訪問腳本之家圖書館
簡單易懂的PHP魔法
簡單易懂的C魔法
簡單易懂的JavaScript魔法
簡單易懂的JQuery魔法
JQuery程式碼如下：

複製程式碼 程式碼如下:

$(function(){
$(".nm_ul li"). (function(){
$(this).clone(true).appendTo(".nm_ul"); // 複製目前點擊的節點，並將它追加到

元素
})
});

在頁面中按一下隨便一項後，清單最下方出現該項目的新節點。
複製節點後，被複製的新元素並不具有任何行為。如果需要新元素也具有複製功能（本例中是按一下事件），可以使用以下JQuery程式碼：

複製程式碼程式碼如下:

$("ul li").click(function(){
$(this).clone(true).appendTo("ul"); // 注意參數true
//可以複製自己，而他的副本也有相同功能。