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