jQuery中insertBefore()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中insertBefore()方法用法。分享给大家供大家参考。具体分析如下:

此方法把匹配的元素插入到另一个指定的元素集合的前面。
insertBefore()方法与insertAfter()相反。

语法结构:

$(selector).insertBefore(content)

参数列表:
参数 描述
selector 定义要被插入的内容。
content 定义在哪些元素之前插入内容。

实例代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>insertBefore()函数-三水点靠木</title> 

<style type="text/css">  

p{  

  width:100px;  

  height:100px;  

  background-color:red;

}  

div{  

  width:200px;  

  height:200px;  

  background-color:blue;

}  

</style>  

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

  $("#bt").click(function(){  

    $("div").insertBefore("p");  

  })  

});  

</script>  

</head>  

<body>  

<p></p>  

<div></div>  

<input type="button" value="点击查看效果" id="bt" />

</body>  

</html>

以上代码可以将div元素插入到p元素的前面。
需要特别注意的是,这里的插入是将匹配元素挪动到指定元素的前面,而不是复制一个新的。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 #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
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
二进制交叉权限微型php类分享
2014/02/07 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
详解python之配置日志的几种方式
2017/05/22 Python
python验证码识别实例代码
2018/02/03 Python
python3爬取数据至mysql的方法
2018/06/26 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
新任教师自我鉴定
2014/02/24 职场文书
迎国庆演讲稿
2014/09/05 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
单位实习介绍信
2015/05/05 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers