jquery之insertBefore(),insertAfter(),prependTo(),appendTo()用法详解
导航:
1,insertBefore(),insertAfter(),prependTo(),appendTo()这四个函数用法几乎一样
2, 与之相对的有四个函数:Before(),After(),prepend(),append()
1,jQuery.insertAfter() 函数详解(其他三个参考其用法)
insertAfter()
函数用于将当前所有匹配元素插入到指定元素之后。
与该函数相对的是insertBefore()函数,用于将当前所有匹配元素插入到指定元素之前。
该函数属于jQuery
对象(实例)。
语法
jQueryObject.insertAfter( target )
参数
参数 | 描述 |
---|---|
target | String/Element/jQuery类型指定的目标元素,以便于在该目标之后插入当前匹配的元素。 |
如果参数target
为字符串类型,则将其视作jQuery选择器或html内容字符串,jQuery会自行判断。
返回值
insertAfter()
函数的返回值为jQuery类型,返回表示插入内容的jQuery对象。
注意:如果当前jQuery对象匹配的元素是当前页面中的某些元素,那么这些元素将从原位置上消失。简而言之,这相当于一个移动操作,而不是复制操作。
示例&说明
insertAfter()
函数用于将所有匹配元素插入到指定元素之后的位置:
<p>段落文本1<span></span></p><p>段落文本2<span></span></p> <!--以上是jQuery代码执行前的html内容--><script type="text/javascript">$('<!--插入到p元素之后的位置-->').insertAfter( "p" );// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之后的位置-->')的jQuery对象</script><!--以下是jQuery代码执行后的html内容--> <p>段落文本1<span></span></p><!--插入到p元素之后的位置--><p>段落文本2<span></span></p><!--插入到p元素之后的位置-->
请注意insertAfter()
函数和after()函数的区别:
var $A = $("s1");var $B = $("s2"); // 将$A插入到$B之后$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )// 将$B插入到$A之后$A.after( $B ); // 返回$A
以下面这段HTML代码为例:
<p id="n1"> <span id="n2">span#n2</span> </p><p id="n3"> <label id="n4" class="move">label#n4</label></p><p id="n5"> <span id="n6">span#n6</span></p>
以下jQuery示例代码用于演示insertAfter()
函数的具体用法:
// 将一个自定义的i元素插入到n4之后$('<i>i元素</i>').insertAfter( "#n4" ); // 将n4插入到n2之后// n4将从原位置上消失$('#4').insertAfter( document.getElementById("n2") ); //将一个自定义的strong元素插入到每个span元素之后$("<strong>插入文本</strong>").insertAfter( "span" );
insertAfter()
会将当前匹配元素插入到目标元素的结束标记之后,不会额外添加任何空白字符,上述代码执行后的完整html代码如下(格式未作任何调整):
<p id="n1"> <span id="n2">span#n2</span><strong>插入文本</strong> </p><p id="n3"> <label id="n4" class="move">label#n4</label><i>i元素</i></p>
2,after()函数用法详解(其他三个可参考其用法)
after()
函数用于在每个匹配元素之后插入指定的内容。
指定的内容可以是:html字符串、DOM元素(或数组)、jQuery对象、函数(返回值)。
与该函数相对的是before()函数,用于在每个匹配元素之前插入指定的内容。
该函数属于jQuery
对象(实例)。
语法
jQueryObject.after( content1 [, content2 [, contentN ]] )
参数
参数 | 描述 |
---|---|
content1 | String/Element/jQuery/Function类型指定的追加内容。 |
content2 | 可选/String/Element/jQuery类型指定的追加内容。 |
contentN | 可选/String/Element/jQuery类型指定的追加内容,可以有任意多个。 |
after()
可以将多个参数所表示的内容全部插入到紧邻每个匹配元素之后的位置。如果参数为字符串类型,则将其视作html字符串。
jQuery 1.4 新增支持:参数content1
可以为函数。after()
将根据匹配的所有元素遍历执行该函数,函数中的this
将指向对应的DOM元素。
after()
还会为函数传入两个参数:第一个参数就是当前元素在匹配元素中的索引,第二个参数就是该元素当前的内部html内容(innerHTML)。函数的返回值就是需要插入的内容(可以是html字符串、DOM元素、jQuery对象)。
注意:只有第一个参数可以为自定义函数,用于遍历执行。如果之后的参数也为函数,则调用其toString()方法,将其转为字符串,并视为html内容。
返回值
after()
函数的返回值为jQuery类型,返回当前jQuery对象本身(以便于进行链式风格的编程)。
注意:如果插入的内容是当前页面中的某些元素,那么这些元素将从原位置上消失。简而言之,这相当于一个移动操作,而不是复制操作。
示例&说明
after()
函数用于在每个匹配元素之后的位置插入内容:
<p>段落文本1<span></span></p><!--插入到p元素之后的位置--><p>段落文本2<span></span></p><!--插入到p元素之后的位置--> <script type="text/javascript">$("p").after( '<!--插入到p元素之后的位置-->' ); </script>
请注意after()
函数和insertAfter()函数的区别:
var $A = $("s1");var $B = $("s2"); // 将$B插入到$A之后$A.after( $B ); // 返回$A// 将$A插入到$B之后$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )
以下面这段HTML代码为例:
<p id="n1"> <span id="n2">span#n2</span> </p><p id="n3"> <label id="n4">label#n4</label> <i id="n5">i#n5</i></p>
以下jQuery示例代码用于演示after()
函数的具体用法:
// 在n4之后插入一个自定义的span元素$("#n4").after('<span id="n6">span#n6(new)</span>'); // 在n2之后插入n5// n5将从原位置上消失$("#n2").after( document.getElementById("n5") ); // 在每个span元素之后插入自定义的strong元素$("span").after( function(index, innerHTML){ return '<strong>strong元素' + (index + 1) + '</strong>';} );
after()
会将内容插入指定元素的结束标记之后,不会额外添加任何空白字符,上述代码执行后的完整html代码如下(格式未作任何调整):
<p id="n1"> <span id="n2">span#n2</span><strong>strong元素1</strong><i id="n5">i#n5</i> </p><p id="n3"> <label id="n4">label#n4</label><span id="n6">span#n6(new)</span><strong>strong元素2</strong> </p>
jquery之insertBefore(),insertAfter(),prependTo(),appendTo()用法详解的更多相关文章
- jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- jquery ajax 的 $.get()用法详解
js文件 $(document).ready(function(){ $("form").submit(function(event) {event.preventDefault( ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- Vue1.0用法详解
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- C#中string.format用法详解
C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...
- @RequestMapping 用法详解之地址映射
@RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...
- linux管道命令grep命令参数及用法详解---附使用案例|grep
功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...
- mysql中event的用法详解
一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...
随机推荐
- Dreamweaver 时间轴如何打开
因为下午要辅导几个调皮捣蛋的小孩HTML, 什么能让他们感觉又简单又好玩而起又能提高他们的兴趣呢?DW中设置浮动广告吧! 想好了,动手去做.DwearmWeaver里面居然没了时间轴, 度 ...
- mysql去除重复数据
select可以取别名,delete不能. 1.使用mysql进行delete from操作时,若子查询的 FROM 字句和更新/删除对象使用同一张表,会出现错误. mysql> DELETE ...
- SQL Server安装完成后3个需要立即修改的配置选项(转载)
你用安装向导安装了全新的SQL Server,最后你点击了完成按钮.哇噢~~~现在我们可以把我们的服务器进入生产了!抱歉,那并不是真的,因为你的全新SQL Server默认配置是错误的. 是的,你没看 ...
- oracle 11g 64w 用32位的pl/sql
1. 下载64位Oracle,解压两文件,解压完成后将文件合并,安装: 2. 下载PL/SQL,安装: 3. 下载instantclient-basic-win32-11.2.0.1.0.zip ...
- editPlus,3.7V 注册码
editPlus,3.7V 注册码: username:linzhihui password:5A2B6-69740-D9CDE-79702-C9CCD
- Hibernate,get()和load()区别
最主要区别在于,检索策略不同. 无论get和load,首先都会去session缓存中看有没有现成的数据.没有的话,get会采用立即检索策略.即:将对象从数据库检索出来并返回,不使用代理类.load的话 ...
- POJ 3026 : Borg Maze(BFS + Prim)
http://poj.org/problem?id=3026 Borg Maze Time Limit: 1000MS Memory Limit: 65536K Total Submissions ...
- ecshop添加商品选择品牌时如何按拼音排序
ECSHOP后台添加新商品时,有一个选择品牌的下拉框,如果品牌太多,在下拉框里查找起来很不方便. 我想给“下拉框里的品牌列表”按品牌名的拼音排序,比如有“中国水利出版社” “中国人民出版社” 这两个品 ...
- linux进程调度方法(SCHED_OTHER,SCHED_FIFO,SCHED_RR)
转于:http://blog.csdn.net/maray/article/details/2900689 Linux内核的三种调度方法: 1,SCHED_OTHER 分时调度策略, 2,SCHED_ ...
- 20145227 《Java程序设计》第5周学习总结
20145227 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 异常处理 8.1 语法与继承结构 1.使用try .catch java中所有错误都会被打包为对象,可以尝试 ...