jQuery實作節點的追加、取代、刪除、複製功能詳解

本文主要介紹了jQuery實現節點的追加、替換、刪除、複製功能,結合具體實例形式分析了jQuery針對DOM節點的操作技巧,涉及append()、prepend()、replaceAll()、replaceWith() empty()、remove()、clone()、clone()等方法的使用技巧,需要的朋友可以參考下，希望能幫助到大家。

本文實例講述了jQuery實作節點的追加、取代、刪除、複製功能。分享給大家供大家參考，具體如下：

一、追加節點分為父子和兄弟節點的追加。 每個追加節點的方法又分主動追加和被動追加。

//1、父子关系的添加
//主动添加
$(&#39;#shu&#39;).append(&#39;<li>关羽</li>&#39;);//往后添加
$(&#39;#shu&#39;).prepend(&#39;<li>黄忠</li>&#39;);//往前添加
//被动添加
$(&#39;<li>黄盖</li>&#39;).appendTo($(&#39;#wu&#39;));
$(&#39;<li>陆逊</li>&#39;).prependTo($(&#39;#wu&#39;));
//添加已存节点，发生位置改变
$(&#39;#shu&#39;).prepend($(&#39;#wu li:eq(1)&#39;));
//2、兄弟关系的添加.after .before .insertAfter .insertBefore
//主动
$(&#39;#liu&#39;).after(&#39;<li>赵云</li>&#39;);
$(&#39;#liu&#39;).before(&#39;<li>诸葛亮</li>&#39;);
//被动
$(&#39;<li>黄月英</li>&#39;).insertAfter($(&#39;#liu&#39;));
$(&#39;<li>孙尚香</li>&#39;).insertBefore($(&#39;#liu&#39;));

二、取代節點.replaceAll   .replaceWith

##

//replaceAll主动替换
$('#wu').replaceAll($('#shu'));
//replaceWith被动替换
$(&#39;#yu&#39;).replaceWith(&#39;<li>黄盖</li>&#39;);

三、刪除節點.empty()  .remove()

#

$('#wu').empty(); //清空对应的子节点
$('#fei').remove(); //删除匹配到的节点

四、複製節點.clone(true)  .clone(false)

參數為true，節點和身上的事件都會給複製

參數為false，只複製節點本身（包含內部的資訊）

$('#fei').clone(false); //只复制节点本身
$('#fei').clone(true); //复制节点和事件

相關推薦：

淺談事件冒泡、事件委託、jQuery元素節點操作

#zTree非同步載入展開第一級節點方法實作

實例分享JQuery 選擇器、DOM節點操作練習#

以上是jQuery實作節點的追加、取代、刪除、複製功能詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！