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调用
Jun 24 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
alert和confirm功能介绍
May 21 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
使用Mock.js生成前端测试数据
Dec 13 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
ucenter通信原理分析
2015/01/09 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
javascript 三种编解码方式
2010/02/01 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
货代行业个人求职简历的自我评价
2013/10/22 职场文书
公务员培训心得体会
2013/12/28 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
上党课的心得体会
2014/09/02 职场文书
赔偿协议书
2015/01/27 职场文书
平遥古城导游词
2015/02/03 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
Python基于Opencv识别两张相似图片
2021/04/25 Python
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python