溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹jQuery如何實現元素插入，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
效果圖：
圖（1） 初始效果
圖（2） 點擊' 插入到此元素前面 '效果
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="//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>
以上是“jQuery如何實現元素插入”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
