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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
原生js实现碰撞检测
Mar 12 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
php创建无限级树型菜单
2015/11/05 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
JS的replace方法介绍
2012/10/20 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
奥巴马演讲稿
2014/01/08 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
《观舞记》教学反思
2014/04/16 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
教师自荐信范文
2015/03/06 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python