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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
php实现的xml操作类
2016/01/15 PHP
php数据访问之增删改查操作
2016/05/09 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
删除节点的jquery代码
2014/01/13 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python paramiko模块的使用示例
2018/04/11 Python
提升Python程序性能的7个习惯
2019/04/14 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
成功的餐厅经营创业计划书
2014/01/15 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
第二次离婚起诉书
2015/05/18 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers