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í)例說明)
- 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)文章
這篇文章主要介紹了jQuery 中DOM 操作詳解,需要的朋友可以參考下2015-01-01
正負(fù)小數(shù)點(diǎn)后兩位浮點(diǎn)數(shù)實(shí)現(xiàn)原理及代碼
需要做個(gè)對(duì)兩位小數(shù)點(diǎn)的正負(fù)浮點(diǎn)數(shù)的處理要求：非數(shù)字或者.字符自動(dòng)清除，并對(duì).12自動(dòng)修補(bǔ).前的0，實(shí)現(xiàn)原理如下，感興趣的朋友可以參考下2013-09-09
jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
prop和attr的區(qū)別你知道嗎？在本文有些不錯(cuò)的示例對(duì)兩者詳細(xì)介紹，感興趣的朋友不要錯(cuò)過2013-11-11
下面小編就為大家?guī)硪黄狫Query 獲取Dom元素的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼
jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼，需要的朋友可以參考一下2013-05-05
作為輕量級(jí)的JS庫，jQuery隨著JavaScrīpt腳本的大熱而備受Web開發(fā)者親睞。本文給大家分享五個(gè)有用的jquery小技巧，需要的朋友可以參考下2015-10-10
全選、全非選即取得被選中的值在日常開發(fā)應(yīng)用中很廣泛，下面有個(gè)不錯(cuò)的示例，大家可以感受下2013-11-11
本文通過實(shí)例代碼給大家介紹了jquery 與css相結(jié)合實(shí)現(xiàn)的下拉列表功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
JQuery實(shí)現(xiàn)簡單的圖片滑動(dòng)切換特效
基于jQuery的一款圖片展示特效代碼,鼠標(biāo)移到圖片上方懸停時(shí)會(huì)自動(dòng)切換成文字簡單顯示,適合做圖片集展示,推薦給大家。2015-11-11
jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D
這篇文章主要為大家詳細(xì)介紹了jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03