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判断浏览器的比较全的代码
Feb 13 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
VUE中使用MUI方法
Feb 12 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 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
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python3实现Web网页图片下载
2016/01/28 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python中dict使用方法详解
2019/07/17 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
市场部管理制度
2014/02/02 职场文书
cf战队收人广告词
2014/03/14 职场文书
幼儿园老师寄语
2014/04/03 职场文书
小石潭记导游词
2015/02/03 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL