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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
浅谈Fetch 数据交互方式
Dec 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
Symfony核心类概述
2016/03/17 PHP
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python中Django 后台自定义表单控件
2017/03/28 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python实现推箱子游戏
2020/03/25 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
Python如何批量生成和调用变量
2020/11/21 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
销售自我评价
2013/10/22 职场文书
教师实习自我鉴定
2013/12/13 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
文员岗位职责
2015/02/04 职场文书
五一劳动节活动总结
2015/02/09 职场文书
大学教师个人总结
2015/02/10 职场文书
水电工岗位职责
2015/02/14 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书