JQ 添加节点和插入节点的方法总结
转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345
添加节点的jQuery方法: append()、prepend()、appendTo() 、prependTo()
插入节点的jquery方法: after() 、before() 、insertBefore() 、insertAfter()
举个例子来说明以上几种方法的用法:
html例子:
<nav>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
</nav>
添加节点
1、append()方法:
script:
var $div = '<div>append添加的节点</div>';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容底部
html:
<nav>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
<div>append添加的节点</div>
</nav>
2、prepend()方法:
script:
var $div = '<div>append添加的节点</div>';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容顶部
html:
<nav>
<div>prepend添加的节点</div>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
</nav>
3、appendTo()方法:
script:
var $div = '<div>append添加的节点</div>';
var nav = $('nav'); //$div.appendTo($nav); //这样写是错误的 $('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。 将新创建的节点添加到nav的内容后面
html:
<nav>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
<div>appendTo添加的节点</div>
</nav>
4、prependTo()方法:
script:
var $div = '<div>append添加的节点</div>';
var nav = $('nav'); //$div.prependTo($nav); //和前面同理,这样写是错误的 $('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。 将新创建的节点添加到nav的内容的前面
html:
<nav>
<div>prependTo添加的节点</div>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
</nav>
插入节点
5、after()方法:
script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2));
var nav = $('nav'); $l_2.after($l_1); //这里可以这么理解,第2个li后面跟着第1个li。
html:
<nav>
<ul>
<li>序列号2</li>
<li>序列号1</li>
<li>序列号3</li>
</ul>
</nav>
6、before()方法:
script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2));
var nav = $('nav'); $l_1.before($l_2); //这里可以这么理解,第1个li前面是第2个li。
html:
<nav>
<ul>
<li>序列号2</li>
<li>序列号1</li>
<li>序列号3</li>
</ul>
</nav>
7、insertBefore()方法:
script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2));
var nav = $('nav'); $l_2.insertBefore($l_1); //将第2个li插入到第1个li前面
html:
<nav>
<ul>
<li>序列号2</li>
<li>序列号1</li>
<li>序列号3</li>
</ul>
</nav>
8、insertAfter()方法:
script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2));
var nav = $('nav'); $l_1.insertAfter($l_2); //将第1个li插入到第2个li后面
html:
<nav>
<ul>
<li>序列号2</li>
<li>序列号1</li>
<li>序列号3</li>
</ul>
</nav>
容易出现问题的地方在 appendTo()和preappendTo()。
JQ 添加节点和插入节点的方法总结的更多相关文章
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- JQuery_DOM 节点操作之创建节点、插入节点
一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...
- 删除节点与插入节点 & innerHTML
1.测试removeChild()方法: 删除节点dom9.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &q ...
- jq添加和移除事件的方法,prop和attr
会在写条件判断的时候遇到,今天在判断没有剩余产品的时候,移除事件.当有产品的时候添加事件: 移除onClick事件: $("a").removeAttr("onclick ...
- C语言实现双向链表删除节点、插入节点、双向输出等操作
#include<cstdio> #include<cstdlib> typedef struct DoubleLinkedList { int data; struct Do ...
- [javaSE] 数据结构(二叉查找树-插入节点)
二叉查找树(Binary Search Tree),又被称为二叉搜索树,它是特殊的二叉树,左子树的节点值小于右子树的节点值. 定义二叉查找树 定义二叉树BSTree,它保护了二叉树的根节点BSTNod ...
- 插入节点insertBefore()
http://www.imooc.com/code/1699 插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点. 语法: insertBef ...
- 使用jq插入节点
.append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插 ...
- js:插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
随机推荐
- Unity官方宣传片Adam 播放地址
https://www.youtube.com/watch?v=GXI0l3yqBrA 适合吸引初学的人走下去,不知道你们初次看的时候什么感觉,反正我被震撼到了!(听说资源包有10个G!官方可下载) ...
- 使用C++部署Keras或TensorFlow模型
本文介绍如何在C++环境中部署Keras或TensorFlow模型. 一.对于Keras, 第一步,使用Keras搭建.训练.保存模型. model.save('./your_keras_model. ...
- Build rpm example:zram
rpmbuild #ll zram-1.0.0 total 32 -rw-r--r-- 1 root root 948 Aug 21 16:44 Makefile -rw-r--r-- 1 root ...
- d3代码如何改造成update结构(恰当处理enter和exit)
d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...
- Vue学习之路第二篇:插值表达式
要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...
- 【Paper Reading】Deep Supervised Hashing for fast Image Retrieval
what has been done: This paper proposed a novel Deep Supervised Hashing method to learn a compact si ...
- linux之资料重定向
標準輸入 (stdin) :代碼為 0 ,使用 < 或 << : 標準輸出 (stdout):代碼為 1 ,使用 > 或 >> : 標準錯誤輸出(stderr):代 ...
- qt quick中qml编程语言
Qt QML 入门 — 使用C++定义QML类型 发表于 2013 年 3 月 11 日 注册C++类 注册可实例化的类型 注册不实例化的QML类型 附带属性 注册C++类 注册可实例化的类型 如 ...
- 小学生都能学会的python(函数)
小学生都能学会的python(函数) 神马是函数 函数: 对功能或者动作的封装 函数的定义 def 函数名(形参列表): 函数体(return) ret = 函数名(实参列表) 函数的返回值 retu ...
- 20130912.Windows下常用命令的使用(不断更新)
Win+R================================ cmd => 命令行 lpksetup => 弹出安装或者卸载Windows显示语言 ipconfig => ...