欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)元素的插入

 更新時(shí)間：2017年02月27日 15:01:57   作者：sirius周周  
本文主要介紹了jQuery實(shí)現(xiàn)元素的插入--insertBefore（）和insertAfter（）方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

 效果圖：

圖（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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

相關(guān)文章

最新評(píng)論