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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
Jquery $.map使用方法实例详解
Sep 01 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,不用COM,生成excel文件
2006/10/09 PHP
探讨如何把session存入数据库
2013/06/07 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
从0开始学Vue
2016/10/27 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python实现倒计时的示例
2014/02/14 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
Python修改DBF文件指定列
2020/12/19 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
高中生第一学年自我鉴定
2014/09/12 职场文书
2014年业务工作总结
2014/11/17 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
护理专业自我评价
2015/03/11 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang