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