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


Posted in jQuery onJuly 11, 2017

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

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

//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()

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

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

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

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

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

jQuery 相关文章推荐
jQuery异步提交表单实例
May 30 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
使用jQuery实现动态添加小广告
Jul 11 #jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 #jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
You might like
优化PHP代码的53条建议
2008/03/27 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
js 页面元素的几个用法总结
2013/11/18 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
微信小程序实现分享商品海报功能
2019/09/30 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
python类装饰器用法实例
2015/06/04 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
求高于平均分的学生学号及成绩
2016/09/01 面试题
彩妆大赛策划方案
2014/05/13 职场文书
2015年会计年终工作总结
2015/05/26 职场文书