當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

JQuery实现动态插入HTML模块

發布時間：2024/9/19 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery实现动态插入HTML模块小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JQuery實現動態插入HTML模塊

在項目中經常會遇到需要動態生成某個模塊并將其插入到原有的HTML頁面中，那么我就將我所知道的方法總結如下：
選擇器選擇的都是父級，添加到父級里
append：$("#wrap").append(“

啦啦啦
“); 添加到父級中所有子元素的最前面
appendto: ( " < p > 啦啦啦 < / p > " ) . a p p e n d T o ( ("<p>啦啦啦 </p>").appendTo( ("<p>啦啦啦</p>").appendTo((”#wrap”)); 添加到父級中所有子元素的最前面

prepend: $("#wrap").prepend(“

啦啦啦
“); 添加到父級中所有子元素的最前面
prependto: ( " < p > 啦啦啦 < / p > " ) . p r e p e n d T o ( ("<p>啦啦啦 </p>").prependTo( ("<p>啦啦啦</p>").prependTo((”#wrap”)); 添加到父級中所有子元素的最前面

添加到與父級同級
after: $("#wrap").after(“

啦啦啦
“); 添加到當前選擇的父級元素前面
insertafter: ( " < p > 啦啦啦 < / p > " ) . i n s e r t A f t e r ( ("<p>啦啦啦 </p>").insertAfter( ("<p>啦啦啦</p>").insertAfter((”#wrap”)); 添加到當前選擇的父級元素前面

before: $("#wrap").before(“

啦啦啦
“); 添加到當前選擇的父級元素后面
insertbefore: ( " < p > 啦啦啦 < / p > " ) . i n s e r t B e f o r e ( ("<p>啦啦啦 </p>").insertBefore( ("<p>啦啦啦</p>").insertBefore((”#wrap”)); 添加到當前選擇的父級元素后面
?

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>js中常用追加元素的幾種方法</title><style>.container {width: 1200px;padding: 10px;margin: 50px auto;border: 1px solid lightcoral;}#wrap{border: 1px solid lightseagreen;margin-top: 20px;margin-bottom: 20px;}.container p{height: 30px;line-height: 30px;}.btn-group{margin-top: 20px;}button{width: 80px;height: 32px;margin-right: 10px;line-height: 32px;text-align: center;border: 0px;}.test{width: 300px;height: 200px;border: 1px salmon solid;}</style> </head> <body> <div class="container"><div class="test"></div><div id="wrap"><p class="first">我是第一個子元素</p><p class="second">我是第二個子元素</p></div><div class="test"></div><div class="btn-group"><button class="append">append</button><button class="appendTo">appendTo</button><button class="prepend">prepend</button><button class="prependTo">prependTo</button><button class="after">after</button><button class="insertAfter">insertAfter</button><button class="before">before</button><button class="insertBefore">insertBefore</button></div></div></body> </html> <script src="../js/jquery-3.2.1.js"></script> <script>var i = 0;$(function(){//append(),在父級最后追加一個子元素$(".append").click(function(){$("#wrap").append("<p class='three'>我是子元素append"+i+"</p>");i++;});//appendTo(),將子元素追加到父級的最后$(".appendTo").click(function(){$("<p class='three'>我是子元素appendTo"+i+"</p>").appendTo($("#wrap"));i++;});//prepend(),在父級最前面追加一個子元素$(".prepend").click(function(){$("#wrap").prepend("<p class='three'>我是子元素prepend"+i+"</p>");i++;});//prependTo(),將子元素追加到父級的最前面$(".prependTo").click(function(){$("<p class='three'>我是子元素prependTo"+i+"</p>").prependTo($("#wrap"));i++;});//after(),在當前元素之后追加（是同級關系）$(".after").click(function(){$("#wrap").after("<p class='siblings'>我是同級元素after"+i+"</p>");i++;});//before(),在當前元素之前追加（是同級關系）$(".before").click(function(){$("#wrap").before("<p class='siblings'>我是同級元素before"+i+"</p>");i++;});//insertAfter(),將元素追加到指定對象的后面（是同級關系）$(".insertAfter").click(function(){$("<p class='three'>我是同級元素insertAfter"+i+"</p>").insertAfter($("#wrap"));i++;});//insertBefore(),將元素追加到指定對象的前面（是同級關系）$(".insertBefore").click(function(){$("<p class='three'>我是同級元素insertBefore"+i+"</p>").insertBefore($("#wrap"));i++;});});</script>

轉自：https://blog.csdn.net/Immortal_W/article/details/86565060

總結

以上是生活随笔為你收集整理的JQuery实现动态插入HTML模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：山拖504怎么换机油？
下一篇：货车飞翼电机好的,就是有哒哒声音？