jQuery實(shí)現(xiàn)元素的插入
更新時(shí)間：2017年02月27日 15:01:57 作者：sirius周周
本文主要介紹了jQuery實(shí)現(xiàn)元素的插入--insertBefore（）和insertAfter（）方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
效果圖：
圖（1） 初始效果
圖（2） 點(diǎn)擊' 插入到此元素前面 '效果
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.div{
width: 200px;
height: 200px;
border: 1px solid #008080;
background-color: #0095FF;
text-align: center;
line-height: 200px;
color: white;
font-size: 25px;
float: left;
}
#num{
height: 30px;
text-align: center;
font-size: 16px;
}
#main{
width: 100%;
height: 400px;
margin-top: 20px;
}
button{
height: 35px;
}
.newDiv{
width: 200px;
height: 200px;
border: 1px solid #008080;
background-color: #009999;
text-align: center;
line-height: 200px;
color: white;
font-size: 25px;
float: left;
}
</style>
<body>
插入到第幾個(gè)元素：<input id="num" type="number" min="0" max="4" value="4" />
<button id="insertFront">插入到此元素前面</button>
<button id="insertBack">插入到此元素后面</button>
<div id="main">
</div>
</body>
<script type="text/javascript">
$(function(){
var mainDiv=$("#main");
for(var i=1;i<6;i++){
var $divs=$("<div class='div' id='a"+i+"'>我是第"+i+"個(gè)</div>")
mainDiv.append($divs)
}
var newDiv=$("<div class='newDiv'>我是新的</div>");
var front=$("#insertFront")
var back=$("#insertBack")
front.click(function(){
var numVal=parseInt($("#num").val());
var div1=document.getElementById("a"+numVal+"");
newDiv.insertBefore(div1)
})
back.click(function(){
var numVal=parseInt($("#num").val());
var div1=document.getElementById("a"+numVal+"");
newDiv.insertAfter(div1);
})
})
</script>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
IE還真是讓設(shè)計(jì)師恨的牙癢癢的東西，且現(xiàn)在已經(jīng)有IE6、IE7、IE8、IE9、IE10這個(gè)五種不同版本的瀏覽器，且都有一點(diǎn)小差異。但是沒辦法，為了讓網(wǎng)頁在每個(gè)瀏覽器中顯示都一樣還必須遷就它2014-06-06
隨鼠標(biāo)上下滾動，在某些時(shí)候需要類似的效果，下面有個(gè)不錯(cuò)的示例可以實(shí)現(xiàn)此效果，需要的朋友可以參考下2013-12-12
這篇文章主要為大家分享了jqueryUI tab標(biāo)簽頁代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
jQuery powerFloat萬能浮動層下拉層插件使用介紹
支持hover, click, focus以及無事件觸發(fā)；支持多達(dá)12種位置的定位，出界自動調(diào)整；支持頁面元素加載，Ajax加載，下拉列表，提示層效果，tip類效果等；可自定義裝載容器；內(nèi)置UI不錯(cuò)的裝載容器；支持鼠標(biāo)跟隨等。2010-12-12
使用jQuery.Pin垂直滾動時(shí)固定導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了使用jQuery.Pin垂直滾動時(shí)固定導(dǎo)航的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了jQuery中:file選擇器用法,實(shí)例分析了:file選擇器的功能、定義及選取類型為file的<input>元素的使用技巧,需要的朋友可以參考下2015-01-01
jquery.cookie.js 操作cookie實(shí)現(xiàn)記住密碼功能的實(shí)現(xiàn)代碼
jquery.cookie.js操作cookie實(shí)現(xiàn)記住密碼功能，很簡單很強(qiáng)大，喜歡的朋友可以參考下。2011-04-04
解決jquery實(shí)現(xiàn)的radio重新選中的問題
這篇文章主要介紹了解決jquery實(shí)現(xiàn)的radio重新選中的問題的方法和示例，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
JQuery實(shí)現(xiàn)的購物車功能(可以減少或者添加商品并自動計(jì)算價(jià)格)
這篇文章主要介紹了JQuery實(shí)現(xiàn)的購物車功能(可以減少或者添加商品并自動計(jì)算價(jià)格),本文的這個(gè)模擬實(shí)現(xiàn)的購物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識點(diǎn),需要的朋友可以參考下2015-01-01
jQuery remove() 方法也可接受一個(gè)參數(shù)，允許您對被刪元素進(jìn)行過濾。下面通過實(shí)例代碼給大家介紹jQuery remove()過濾被刪除的元素，需要的的朋友參考下吧2017-07-07