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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现简单评论功能
Aug 19 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生成静态html文件的三种方法
2013/06/18 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python循环语句中else的用法总结
2016/09/11 Python
python使用opencv读取图片的实例
2017/08/17 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
证婚人经典证婚词
2014/01/09 职场文书
学校介绍信范文
2014/01/14 职场文书
社区端午节活动方案
2014/01/28 职场文书
劳动实践课感言
2014/02/01 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
北京奥运会主题口号
2014/06/13 职场文书
委托书格式
2014/08/01 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技