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实现多域名不同文件的调用方法
Jan 12 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
档案接收函格式
2015/01/30 职场文书
2015年端午节活动总结
2015/02/11 职场文书
工作收入证明模板
2015/06/12 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript