jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)


Posted in Javascript onSeptember 08, 2016

本文实例讲述了jQuery插入节点和移动节点的方法。分享给大家供大家参考,具体如下:

1. 插入节点:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  var $li_1 = $("<li title='香蕉'>香蕉</li>");  // 创建第一个<li>元素
  var $li_2 = $("<li title='雪梨'>雪梨</li>");  // 创建第二个<li>元素
  var $li_3 = $("<li title='其它'>其它</li>");  // 创建第三个<li>元素
  var $parent = $("ul"); // 获取<ul>节点,即<li>的父节点
  var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  $parent.append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面
  $parent.prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面
  $li_3.insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图:

jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

2. 移动节点:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
  $two_li.insertBefore($one_li); // 移动节点
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图:

jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JS数据类型分类及常用判断方法
Nov 19 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 #Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 #Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 #Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 #Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 #Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 #Javascript
js发送短信倒计时的简单实现方法
Sep 08 #Javascript
You might like
php生成zip压缩文件的方法详解
2013/06/09 PHP
js获取div高度的代码
2008/08/09 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python中实现常量(Const)功能
2015/01/28 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Django分页功能的实现代码详解
2019/07/29 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python tornado上传文件的功能
2020/03/26 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
运动会广播稿500字
2014/01/28 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
工商干部先进事迹
2014/05/14 职场文书
事业单位鉴定材料
2014/05/25 职场文书
经销商年会策划方案
2014/05/29 职场文书
2014年终个人工作总结
2014/11/07 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python