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创建命名空间(namespace)的最简实现
Dec 11 Javascript
Ext 今日学习总结
Sep 19 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
理解AngularJs指令
Dec 10 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
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+ACCESS 文章管理程序代码
2010/06/21 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python中super的用法实例
2015/05/28 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python下载微信公众号相关文章
2019/02/26 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python 画出来六维图
2019/07/26 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
Python学习之time模块的基本使用
2021/01/17 Python
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
公务员个人自我评价分享
2013/11/06 职场文书
学校对教师的评语
2014/04/28 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
python tqdm用法及实例详解
2021/06/16 Python