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的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 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短域名转换为实际域名函数
2011/01/17 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python re模块的高级用法详解
2018/06/06 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
static关键字的用法
2013/10/07 面试题
小学英语教学反思案例
2014/02/04 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
企业党建工作总结2015
2015/05/26 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
关于的python五子棋的算法
2022/05/02 Python
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android