jquery隨意添加移除html的實現(xiàn)代碼
更新時間：2011年06月21日 23:15:47 作者：
jquery隨意添加移除html的實現(xiàn)代碼，需要的朋友可以參考下。
html代碼：
<ul id="list3" class="eventlist">
<li>plain</li>
<li class="special">special <button>I am special</button></li>
<li>plain</li>
</ul>
script代碼：
function addRemoveItemNS() {
var $newLi = $('<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>');
$('#list3 li.special')
.find('button.addone')
.unbind('click.addit')
.bind('click.addit', function() {
$(this).parent().after($newLi);
addRemoveItemNS();
})
.end()
.find('button.removeme')
.unbind('click.removeit')
.bind('click.removeit', function() {
$(this).parent().remove();
});
}
$(document).ready(function() {
addRemoveItemNS();
});
可以隨意添加移除html代碼。
復(fù)制代碼 代碼如下:
<ul id="list3" class="eventlist">
<li>plain</li>
<li class="special">special <button>I am special</button></li>
<li>plain</li>
</ul>
script代碼：
復(fù)制代碼 代碼如下:
function addRemoveItemNS() {
var $newLi = $('<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>');
$('#list3 li.special')
.find('button.addone')
.unbind('click.addit')
.bind('click.addit', function() {
$(this).parent().after($newLi);
addRemoveItemNS();
})
.end()
.find('button.removeme')
.unbind('click.removeit')
.bind('click.removeit', function() {
$(this).parent().remove();
});
}
$(document).ready(function() {
addRemoveItemNS();
});
可以隨意添加移除html代碼。
您可能感興趣的文章:
- jQuery如何將選中的對象轉(zhuǎn)化為原始的DOM對象
- jQuery獲取單擊節(jié)點對象的方法
- jquery遍歷json對象集合詳解
- jQuery對象的鏈?zhǔn)讲僮饔梅ǚ治?/a>
- 解析Jquery中如何把一段html代碼動態(tài)寫入到DIV中(實例說明)
- jQuery實現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- phpQuery讓php處理html代碼像jQuery一樣方便
- jquery 獲取 outerHtml 包含當(dāng)前節(jié)點本身的代碼
- JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實現(xiàn)代碼
- jquery模擬LCD 時鐘的html文件源代碼
- Jquery在指定DIV加載HTML示例代碼
- jQuery查看選中對象HTML代碼的方法
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于jQuery拖拽事件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了jQuery與getJson結(jié)合的用法,實例分析了jquery解析json數(shù)據(jù)及數(shù)組遍歷的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
BootStrap 標(biāo)題設(shè)置跨行無效的解決方法
這篇文章主要介紹了BootStrap 標(biāo)題設(shè)置跨行無效的解決方法,需要的朋友可以參考下2017-10-10
jquery.gridrotator實現(xiàn)響應(yīng)式圖片展示畫廊效果
本教程將教大家制作一個jQuery響應(yīng)式圖片展示畫廊效果，所有圖片以網(wǎng)格的形式排列，然后定時隨機翻轉(zhuǎn)其中某些格子用來切換圖片。這種效果可以用來當(dāng)做背景或裝飾放在我們的網(wǎng)站上。2015-06-06
下面小編就為大家?guī)硪黄猨query之別踩白塊游戲的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-07-07
今天要做一個應(yīng)用--判斷編輯器中文字的個數(shù)。如果少如20個字就不能讓其提交。沒多想，正好周末的時候看了一下js中正則表達式的內(nèi)容。很容易就想到了要用正則表達式來解決這個問題。雖說看了正則表達式的內(nèi)容是看了，但是畢竟還是剛接接觸，連基本的概念都很模糊，于是只好在網(wǎng)上找到如下的代碼：2013-05-05
這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章介紹了jQuery中的CSS-DOM操作，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
jQuery實現(xiàn)可以計算進制轉(zhuǎn)換的計算器
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)可以計算進制轉(zhuǎn)換的計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了基于Jquery實現(xiàn)焦點圖淡出淡入效果，需要的朋友可以參考下2015-11-11