jQuery-DOM操作之復制、替換、包裹節點

1、復制節點

clone()

$(function(){
            $('ul li').click(function() {
                $(this).clone().appendTo('ul');  //復制當前單擊的節點，並將它追加到ul元素中
            });
});

復制節點后，被復制的新元素並不具有任何行為，如果需要新元素也具有復制功能，需要給clone()傳遞參數true，clone(true).true的含義是復元素並復制元素所綁定的事件

$(function(){
            $('ul li').click(function() {
                $(this).clone(true).appendTo('ul');  //復制當前單擊的節點（綁定了clone()事件），並將它追加到ul元素中
            });
});

2、替換節點

replaceWith()

replaceAll()

$(function(){
            $('p').replaceWith('<span>你最不喜歡的水果是？</span>')  //span元素替換p元素
            $("<span>你最不喜歡的水果是？</span>").replaceAll('p') //span元素替換p元素
});

3、包裹節點

wrap()--有多個標簽，每個標簽都會被一個標簽包裹

$(function(){
            $('p').wrap('<div></div>');  //用div標簽把strong標簽包裹起來
});

wrapAll()--有多個標簽，所有的標簽被一個標簽包裹

wrapInner()

$(function(){
            $('p').wrapInner('<b></b>');//b標簽包裹p標簽里面的子內容，包括文本節點。<p title="選擇你最喜歡的水果."><b>你最喜歡的水果是？</b></p>
});