jQuery實現(xiàn)元素的插入
更新時間：2017年02月27日 15:01:57 作者：sirius周周
本文主要介紹了jQuery實現(xiàn)元素的插入--insertBefore（）和insertAfter（）方法，具有很好的參考價值，下面跟著小編一起來看下吧
效果圖：
圖（1） 初始效果
圖（2） 點擊' 插入到此元素前面 '效果
代碼如下：
<!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>
插入到第幾個元素：<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+"個</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)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
jquery中郵箱地址 URL網(wǎng)站地址正則驗證實例代碼
QQ網(wǎng)站有一個網(wǎng)站舉報的功能，看了一些js代碼覺得寫得很不錯，我就拿下來了，下面是一個email驗證與url網(wǎng)址驗證js代碼，分享給大家2013-09-09
juqery 學習之三 選擇器 層級 基本，學習jquery的朋友可以參考下。2010-11-11
下面小編就為大家?guī)硪黄狫Query為元素添加樣式的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
在EasyUI 的Demo 中 只有MenuButton 的顯示DEMO，沒有click 事件的相關操作，項目中正好用到啦，所以研究了下，可以用js 動態(tài)的為menu item 綁定click 事件2012-07-07
這篇文章主要為大家詳細介紹了JQuery核心函數(shù)是什么，及使用方法介紹，感興趣的小伙伴們可以參考一下2016-05-05
jquery實現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
本文主要介紹了jquery實現(xiàn)靜態(tài)搜索功能的示例代碼，可通過輸入搜索文字進行篩選信息。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
下面小編就為大家?guī)硪黄猨Query獲取this當前對象子元素對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了jquery點擊縮略圖切換視頻播放，我們可以點擊縮略圖切換不同的視頻進行播放，過去是實現(xiàn)圖片切換現(xiàn)在有進一步實現(xiàn)視頻切換，感興趣的小伙伴可以參考下。2015-09-09
jquery點擊頁面任何區(qū)域實現(xiàn)鼠標焦點十字效果
鼠標點擊聚焦，地圖定位，在圖片上突出顯示，焦點定位頁面元素，這些都是在系統(tǒng)開發(fā)是經(jīng)常需要用到的，下面為大家介紹下具體的實現(xiàn)，感興趣的朋友可以參考下哈2013-06-06
jquery動態(tài)添加option選項，還有動態(tài)刪除的方法，大家參考使用吧2013-12-12