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 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
javascript操作ul中li的方法
May 14 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php生成xml简单实例代码
2009/12/16 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python中的高级数据结构详解
2015/03/27 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
python实现猜拳小游戏
2020/04/05 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python3.9新特性详解
2020/10/10 Python
python tkinter实现连连看游戏
2020/11/16 Python
python 模拟登陆github的示例
2020/12/04 Python
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
聚美优品励志广告词
2014/03/14 职场文书
学校评语大全
2014/05/06 职场文书
2014年冬季防火方案
2014/05/21 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
转正申请报告格式
2015/05/15 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python