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

最新推荐文章于 2022-03-27 19:59:27 发布

平平同学爱学习

最新推荐文章于 2022-03-27 19:59:27 发布

阅读量584

点赞数

一、追加节点分为父子和兄弟节点的追加。每个追加节点的方法又分主动追加和被动追加。

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

二、替换节点.replaceAll .replaceWith

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

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

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

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

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

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

平平同学爱学习

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现节点的追加、替换、删除、复制功能示例

一、追加节点分为父子和兄弟节点的追加。每个追加节点的方法又分主动追加和被动追加。?12345678910111213141516//1、父子关系的添加//主动添加$('#shu').append('&lt;li&gt;关羽&lt;/li&gt;');//往后添加$('#shu').prepend('&lt;li&gt;黄忠&lt;/li&gt;');//往前添加//被动添加$('&lt;li&gt...
复制链接

扫一扫