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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 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
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
vue实现评论列表功能
2019/10/25 Javascript
js实现无缝轮播图
2020/03/09 Javascript
python递归函数绘制分形树的方法
2018/06/22 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
django解决跨域请求的问题详解
2019/01/20 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
迎新生标语大全
2014/10/06 职场文书
朋友聚会开场白
2015/06/01 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
django 认证类配置实现
2021/11/11 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js
SQL Server中的游标介绍
2022/05/20 SQL Server