jQuery 文档操作 - insertAfter() ，insertBefore()，after()，before() 方法
这个方法跟prependTo()和appendTo()不一样的地方在于，一个是仍然插入到元素内部，而insertAfter和insertBefore是插入到元素外部。
这里拿insertBefore来作为例子说一下：
使用方法：
第一种方法：插入代码：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("<span>你好！</span>").insertAfter("p");
});
});
</script>
</head> <body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 span 元素</button>
</body>
</html>
插入前：
插入后：
第二种方法：插入已有的元素
会把已有的元素取出来，插入到特定元素的指定位置。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1").insertAfter("p");
});
});
</script>
</head> <body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 h1 元素</button>
</body>
</html>
插入前：
插入后：
会发现，已有的元素在原来的位置消失了，而被复制，插入到特定位置上了。
after() 方法和before() 方法与insertAfter和insertBefore类似，不过使用方式不一样。
例子：
$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});
jQuery 文档操作 - insertAfter() ，insertBefore()，after()，before() 方法的更多相关文章
- jQuery 文档操作之prepend() 和prependTo()方法.
//prepend() $("#btnpre").click(function(){ //该方法在被选元素的开头(仍位于内部)插入指定内容. $("div"). ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- 前端之JQuery：JQuery文档操作
jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...
- jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
- jQuery文档操作--append()、prepend()、after()和before()
append(content|fn) 概述 向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数 content 要追 ...
- jQuery 文档操作
一.插入操作 1. 父元素.append(子元素) 追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素 var oli = ...
随机推荐
- IOC（控制反转）的理解
1.IOC的理论背景 我们知道在面向对象设计的软件系统中,它的底层都是由N个对象构成的,各个对象之间通过相互合作,最终实现系统地业务逻辑[1]. 图1 软件系统中耦合的对象 如果我们打开机械式手表的后 ...
- [BZOJ3209]花神的数论题 组合数+快速幂
3209: 花神的数论题 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2498 Solved: 1129[Submit][Status][Disc ...
- hdu5970
真是怀疑当初合肥赛区怎么考这么差的…… 首先根据辗转相除法可知f(i,j)=f(i+j*k,j) 于是我们可以先于处理出f(i,j) (j<=666,i<=j),当确定i,j时c也确定 ( ...
- 求第N个回文数 模板
备忘. /*看到n可以取到2*10^9.说明普通方法一个个暴力计算肯定会超时的,那打表呢?打表我们要先写个打表的代码,这里不提供.打完表观察数据,我们会发现数据其实是有规律的.完全不需要暴力的把所有数 ...
- 安装和破解Quartus Ⅱ 15.0
http://jingyan.baidu.com/article/b7001fe18d47fc0e7282dd91.html
- 2017中国大学生程序设计竞赛 - 女生专场C【前后缀GCD】
C HDU - 6025 [题意]:去除数列中的一个数字,使去除后的数列中所有数字的gcd尽可能大. [分析]: 数组prefixgcd[],对于prefixgcd[i]=g,g为a[0]-a[i]的 ...
- Oracle的锁
Oracle数据库中的锁机制 数据库是一个多用户使用的共享资源.当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数 ...
- [HDU5739]Fantasia(圆方树DP)
题意:给一张无向点带有权无向图.定义连通图的权值为图中各点权的乘积,图的权值为其包含的各连通图的权和.设z_i为删除i点后图的权值,求$S = (\sum\limits_{i=1}^{n}i\cdot ...
- 【点分治】poj1741 Tree / poj2114 Boatherds / poj1987 Distance Statistics
三道题都很类似.给出1741的代码 #include<cstdio> #include<algorithm> #include<cstring> using nam ...
- Spring.NET的中间数据层（Middle Tier Data Access）——事务管理（Transaction management）
简介 Spring.NET为事务管理提供了一个持久化抽象(consistent abstraction ),其优点如下: 为不同事务API,例如ADO.NET,Enterprise Services, ...