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 国际象棋棋盘 实现代码
Jun 26 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
js实现汉字排序的方法
Jul 23 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
微信小程序新手教程之页面打开数量限制
Mar 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
php简单实现批量上传图片的方法
2016/05/09 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
python try...finally...的实现方法
2020/11/25 Python
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
采购文员岗位职责
2013/11/20 职场文书
自主招生自荐信
2013/12/08 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
2014年统计工作总结
2014/11/21 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
Python pyecharts绘制条形图详解
2022/04/02 Python
Django中celery的使用项目实例
2022/07/07 Python