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导致网页中GIF动画停止的解决方法
Nov 02 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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
基于PHPExcel的常用方法总结
2013/06/13 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
Prototype Class对象学习
2009/07/19 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python实现共轭梯度法
2019/07/03 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python 默认参数相关知识详解
2019/09/18 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
python 实现客户端与服务端的通信
2020/12/23 Python
python Pexpect模块的使用
2020/12/25 Python
美国精油公司:Plant Therapy
2019/05/17 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
nohup的用法
2012/11/26 面试题
后勤管理员岗位职责
2014/08/27 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Nginx安装配置详解
2022/06/25 Servers