jQuery中insertAfter()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中insertAfter()方法用法。分享给大家供大家参考。具体分析如下:

此方法把匹配的元素插入到另一个指定的元素集合的后面。
insertAfter()方法与insertBefore()方法的作用相反。

语法结构:

$(selector).insertAfter(content)

参数列表:

参数 描述
selector 定义要被插入的内容。
content 定义在哪些元素之后插入内容。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>insertAfter()函数-三水点靠木</title> 

<style type="text/css"> 

p{ 

  width:100px; 

  height:100px; 

  border:1px solid red; 

} 

div{ 

  width:200px; 

  height:200px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").insertAfter("p"); 

  }) 

}); 

</script> 

</head> 

<body> 

<div>我的前面会被插入内容</div> 

<p>我是p元素</p> 

<button>点击查看效果</button> 

</body> 

</html>

以上代码可以将div元素插入到p元素的下面,当然是外部的下面。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
javascript实现tab切换特效
Nov 12 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
jQuery中prependTo()方法用法实例
Jan 08 #Javascript
8个超实用的jQuery功能代码分享
Jan 08 #Javascript
jQuery中appendTo()方法用法实例
Jan 08 #Javascript
jQuery中append()方法用法实例
Jan 08 #Javascript
jQuery中end()方法用法实例
Jan 08 #Javascript
jQuery中contents()方法用法实例
Jan 08 #Javascript
jQuery中andSelf()方法用法实例
Jan 08 #Javascript
You might like
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
PHP 文件类型判断代码
2009/03/13 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
学习ExtJS border布局
2009/10/08 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
Vue实现购物车功能
2017/04/27 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python解析文件示例
2014/01/23 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python日志logging模块使用方法分析
2019/05/23 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python如何将模块打包并发布
2020/08/30 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
党的作风建设心得体会
2014/10/22 职场文书