JQuery在頁面中添加和除移DOM示例代碼
更新時(shí)間：2013年06月24日 17:58:33 作者：
本文為大家介紹下使用JQuery實(shí)現(xiàn)在頁面中添加和除移DOM主要使用了以下幾個方法，感興趣的朋友可以了解下哈，希望對大家有所幫助
1.before（）:將新節(jié)點(diǎn)添加到前面
2.after（）:將節(jié)點(diǎn)添加到低部
3.prepend（）:把節(jié)點(diǎn)變成第一個節(jié)點(diǎn)
4.append（）:把新節(jié)點(diǎn)添加到末端,與appendTo（）效果相同，只是語法上有差異
5.remove()：除移節(jié)點(diǎn)
示例：
<ul>
<li class="vacation">
<h2>Hawaiian Vac</h2>
<button>Get Price</button>
</li>
</ul>
實(shí)現(xiàn)：
<script type="text/javascript">
$(document).ready(function () {
$('.vacation').before(price); //將新節(jié)點(diǎn)添加到前面
$('.vacation').after(price);//將節(jié)點(diǎn)添加到低部
$('.vacation').prepend(price); //把節(jié)點(diǎn)變成<li>的第一個節(jié)
var price = $('<p>From $399.99</p>'); //在JQuery中創(chuàng)建一個dom
//$('.vacation').append(price); //把新節(jié)點(diǎn)添加到末端,等于price.appendTo($('.vacation'));，語法不同
price.appendTo($('.vacation'));//把新節(jié)點(diǎn)添加到末端
$('button').remove(); //除移節(jié)點(diǎn)
});
</script>
2.after（）:將節(jié)點(diǎn)添加到低部
3.prepend（）:把節(jié)點(diǎn)變成第一個節(jié)點(diǎn)
4.append（）:把新節(jié)點(diǎn)添加到末端,與appendTo（）效果相同，只是語法上有差異
5.remove()：除移節(jié)點(diǎn)
示例：
復(fù)制代碼 代碼如下:
<ul>
<li class="vacation">
<h2>Hawaiian Vac</h2>
<button>Get Price</button>
</li>
</ul>
實(shí)現(xiàn)：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function () {
$('.vacation').before(price); //將新節(jié)點(diǎn)添加到前面
$('.vacation').after(price);//將節(jié)點(diǎn)添加到低部
$('.vacation').prepend(price); //把節(jié)點(diǎn)變成<li>的第一個節(jié)
var price = $('<p>From $399.99</p>'); //在JQuery中創(chuàng)建一個dom
//$('.vacation').append(price); //把新節(jié)點(diǎn)添加到末端,等于price.appendTo($('.vacation'));，語法不同
price.appendTo($('.vacation'));//把新節(jié)點(diǎn)添加到末端
$('button').remove(); //除移節(jié)點(diǎn)
});
</script>
相關(guān)文章
基于Jquery的動態(tài)創(chuàng)建DOM元素的代碼
jquery動態(tài)創(chuàng)建頁面元素，mark一下，以備以后查詢時(shí)使用。以創(chuàng)建div和input為例。2010-12-12
這篇文章主要為大家詳細(xì)介紹了jquery submit()不能提交表單的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
淺談jquery設(shè)置和獲得checkbox選中的問題
下面小編就為大家?guī)硪黄獪\談jquery設(shè)置和獲得checkbox選中的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了談?wù)刯Query之Deferred源碼剖析,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
本篇文章主要是對jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了jQuery簡單判斷值是否存在于數(shù)組中的方法,涉及jQuery數(shù)組遍歷及基于$.inArray的元素判斷相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery插件實(shí)現(xiàn)文件上傳功能（支持拖拽）
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)文件上傳功能，可支持拖拽文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
JQuery 設(shè)置checkbox值二次無效的解決方法
下面小編就為大家?guī)硪黄狫Query 設(shè)置checkbox值二次無效的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jquery遍歷checkbox的注意事項(xiàng)說明
本篇文章主要是對jquery遍歷checkbox的注意事項(xiàng)進(jìn)行了說明介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動態(tài)加載dom的方法（排序，過濾，分頁等）
Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。這篇文章主要介紹了DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動態(tài)加載dom的方法（排序，過濾，分頁等）,需要的朋友可以參考下2016-11-11