jQuery实现节点的追加、替换、删除、复制功能示例

本文实例讲述了jQuery实现节点的追加、替换、删除、复制功能。分享给大家供大家参考，具体如下：

一、追加节点分为父子和兄弟节点的追加。

每个追加节点的方法又分主动追加和被动追加。

rush:js;"> //1、父子关系的添加 //主动添加 $('#shu').append('

关羽

');//往后添加 $('#shu').prepend('

黄忠

');//往前添加 //被动添加 $('

黄盖

').appendTo($('#wu')); $('

陆逊

').prependTo($('#wu')); //添加已存节点，发生位置改变 $('#shu').prepend($('#wu li:eq(1)')); //2、兄弟关系的添加.after .before .insertAfter .insertBefore //主动 $('#liu').after('

赵云

'); $('#liu').before('

诸葛亮

'); //被动 $('

黄月英

').insertAfter($('#liu')); $('

孙尚香

').insertBefore($('#liu'));

二、替换节点.replaceAll .replaceWith

rush:js;"> //replaceAll主动替换 $('#wu').replaceAll($('#shu')); //replaceWith被动替换 $('#yu').replaceWith('

黄盖

');

三、删除节点.empty() .remove()

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

四、复制节点 .clone(true) .clone(false)

参数为true，节点和其身上的事件都给复制 参数为false，只复制节点本身（包括内部的信息）

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家jQuery程序设计有所帮助。