jQuery中insertBefore()方法用法實(shí)例
更新時(shí)間：2015年01月08日 15:08:22 投稿：shichen2014
這篇文章主要介紹了jQuery中insertBefore()方法用法,實(shí)例分析了insertBefore()方法的功能、定義及把匹配的元素插入到另一個(gè)指定的元素集合前面的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery中insertBefore()方法用法。分享給大家供大家參考。具體分析如下：
此方法把匹配的元素插入到另一個(gè)指定的元素集合的前面。
insertBefore()方法與insertAfter()相反。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(selector).insertBefore(content)
參數(shù)列表:
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<title>insertBefore()函數(shù)-腳本之家</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="點(diǎn)擊查看效果" id="bt" />
</body>
</html>
以上代碼可以將div元素插入到p元素的前面。
需要特別注意的是，這里的插入是將匹配元素挪動(dòng)到指定元素的前面，而不是復(fù)制一個(gè)新的。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了jQuery讀取XML文件的方法,結(jié)合實(shí)例形式分析了jQuery基于ajax針對(duì)xml文件的讀取操作相關(guān)技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了jquery手風(fēng)琴特效插件,效果非常棒，需要的朋友可以參考下2015-02-02
輕松實(shí)現(xiàn)jQuery添加刪除按鈕Click事件
這篇文章主要為大家詳細(xì)介紹了如何輕松實(shí)現(xiàn)jQuery添加刪除按鈕Click事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
jQuery?v3.3.1的BUG以及解決辦法(附解決方案)
這篇文章描述了我們?FineUIPro?產(chǎn)品?更新中遇到的一個(gè)問題，最終將問題定位到?jQuery.position()?函數(shù)，雖然jQuery的做法是依照HTML規(guī)范來的，但是?jQuery.offsetParent()?和?jQuery.position()?兩個(gè)函數(shù)有沖突，并且會(huì)導(dǎo)致之前的jQuery插件出錯(cuò)，應(yīng)該算是一個(gè)BUG吧2023-03-03
jquery按回車提交數(shù)據(jù)的代碼示例，很簡(jiǎn)單的一個(gè)方法，看一下就明白2013-11-11
重寫了昨天的圖片輪換，加入了自動(dòng)切換效果，改變了布局，增強(qiáng)了可定制性，當(dāng)然，還是有點(diǎn)小小的問題，在IE 6+,chrome,firfox3.68下測(cè)試正常運(yùn)行2010-07-07
jquery獲取ASP.NET服務(wù)器端控件dropdownlist和radiobuttonlist生成客戶端HTML標(biāo)簽
jquery獲取ASP.NET服務(wù)器端控件dropdownlist和radiobuttonlist生成客戶端HTML標(biāo)簽后的value和text值2010-06-06
jquery對(duì)表單操作2，最近幾篇整理都是jquery表格操作相關(guān)，大家可以收藏下。2011-04-04
這篇文章主要介紹了jquery html5 視頻播放控制代碼,需要的朋友可以參考下2016-11-11