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实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
js和jquery中获取非行间样式
May 05 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 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 empty函数报错解决办法
2014/03/06 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JS功能代码集锦
2016/05/04 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Vue 过滤器filters及基本用法
2017/12/26 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
python3生成随机数实例
2014/10/20 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
python global关键字的用法详解
2019/09/05 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
物流管理专业毕业生求职信
2014/03/23 职场文书
班干部演讲稿
2014/04/24 职场文书
工作散漫检讨书
2014/09/16 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2014年项目工作总结
2014/11/24 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
运动会100米加油稿
2015/07/21 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python