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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php实现的双向队列类实例
2014/09/24 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP如何实现跨域
2016/05/30 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python聊天室实例程序分享
2016/01/05 Python
Python 闭包的使用方法
2017/09/07 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
django的ORM操作 增加和查询
2019/07/26 Python
python利用7z批量解压rar的实现
2019/08/07 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
HR求职自荐信范文
2014/06/21 职场文书
工作简历自我评价
2015/03/11 职场文书
社团招新宣传语
2015/07/13 职场文书
公司车队管理制度
2015/08/04 职场文书
公司保洁员管理制度
2015/08/04 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Docker下安装Oracle19c
2022/04/13 Servers