jQuery怎么實現(xiàn)節(jié)點(diǎn)追加、替換、刪除和復(fù)制功能

本篇內(nèi)容介紹了“jQuery怎么實現(xiàn)節(jié)點(diǎn)追加、替換、刪除和復(fù)制功能”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、追加節(jié)點(diǎn)分為父子和兄弟節(jié)點(diǎn)的追加。每個追加節(jié)點(diǎn)的方法又分主動追加和被動追加。

//1、父子關(guān)系的添加
//主動添加
$('#shu').append('<li>關(guān)羽</li>');//往后添加
$('#shu').prepend('<li>黃忠</li>');//往前添加
//被動添加
$('<li>黃蓋</li>').appendTo($('#wu'));
$('<li>陸遜</li>').prependTo($('#wu'));
//添加已存節(jié)點(diǎn)，發(fā)生位置改變
$('#shu').prepend($('#wu li:eq(1)'));
//2、兄弟關(guān)系的添加.after .before .insertAfter .insertBefore
//主動
$('#liu').after('<li>趙云</li>');
$('#liu').before('<li>諸葛亮</li>');
//被動
$('<li>黃月英</li>').insertAfter($('#liu'));
$('<li>孫尚香</li>').insertBefore($('#liu'));

二、替換節(jié)點(diǎn).replaceAll   .replaceWith

//replaceAll主動替換
$('#wu').replaceAll($('#shu'));
//replaceWith被動替換
$('#yu').replaceWith('<li>黃蓋</li>');

三、刪除節(jié)點(diǎn).empty()  .remove()

$('#wu').empty(); //清空對應(yīng)的子節(jié)點(diǎn)
$('#fei').remove(); //刪除匹配到的節(jié)點(diǎn)

四、復(fù)制節(jié)點(diǎn) .clone(true)  .clone(false)

參數(shù)為true，節(jié)點(diǎn)和其身上的事件都給復(fù)制
參數(shù)為false，只復(fù)制節(jié)點(diǎn)本身（包括內(nèi)部的信息）

$('#fei').clone(false); //只復(fù)制節(jié)點(diǎn)本身
$('#fei').clone(true); //復(fù)制節(jié)點(diǎn)和事件

“jQuery怎么實現(xiàn)節(jié)點(diǎn)追加、替換、刪除和復(fù)制功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！