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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 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
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
管道维修工岗位职责
2013/12/27 职场文书
我的求职计划书
2014/01/10 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL