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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
vue实现图片上传到后台
Jun 29 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遍历数组的方法分享
2012/03/22 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
python图像处理之反色实现方法
2015/05/30 Python
python 异常处理总结
2016/10/18 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
小学毕业家长寄语
2014/01/19 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
小学生思想品德评语
2014/12/31 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
七年级作文之冬景
2019/11/07 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS