jQuery中insertBefore()方法用法实例
更新时间：2015年01月08日 15:08:22 投稿：shichen2014
这篇文章主要介绍了jQuery中insertBefore()方法用法,实例分析了insertBefore()方法的功能、定义及把匹配的元素插入到另一个指定的元素集合前面的使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery中insertBefore()方法用法。分享给大家供大家参考。具体分析如下：
此方法把匹配的元素插入到另一个指定的元素集合的前面。
insertBefore()方法与insertAfter()相反。
语法结构:
复制代码 代码如下:
$(selector).insertBefore(content)
参数列表:
实例代码:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<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程序设计有所帮助。
相关文章
最近做一个项目，许多功能都是关于弹出框的，在做的过程中发现会有好多自己考虑不到的问题，下面以一个示例为大家详细介绍下，感兴趣的朋友可以参考下2013-08-08
JQuery判断正整数整理小结(jQuery 文本框中只能输入正整数)
这篇文章主要介绍了JQuery判断正整数，附上详细的代码供大家查看具体的方法,需要的朋友可以参考下2017-08-08
写JS实现拖动需要一大堆不便维护的代码，实属麻烦，Google了大半天，发现了一个优秀的Jquery插件EasyDrag，只需要一行代码便可轻松在主流浏览器上。2010-12-12
jQuery.cookie.js实现记录最近浏览过的商品功能示例
这篇文章主要介绍了jQuery.cookie.js实现记录最近浏览过的商品功能,结合实例形式分析了基于jQuery.cookie.js插件创建cookie及保存浏览记录的操作技巧,需要的朋友可以参考下2017-01-01
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Jquery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法，本文给大家介绍Jquery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法。感兴趣的朋友可以参考下2015-10-10
用jQuery取值，当一个id中含有.时，这个时候正常的取法是做不到的，因此请看下文2014-05-05
在一个页面上选择元素返回的集合是jQuery对象而不是原始的DOM对象，那么如何将其转为DOM对象呢？下面有个不错的方法，大家可以尝试操作下2014-06-06
这篇文章主要介绍了jquery+php后台实现省市区联动功能,涉及jQuery事件响应及页面元素属性动态变换,以及ajax后台动态交互相关操作技巧,需要的朋友可以参考下2019-05-05
JQuery中form验证出错，可以采用以下方式来查看具体input的出错信息，下面有个不错的示例，有类似情况的朋友可以参考下2013-10-10
这篇文章主要介绍了dreamweaver 8实现Jquery自动提示的方法,需要的朋友可以参考下2014-12-12
最新评论