jquery随意添加移除html的实现代码
作者:
jquery随意添加移除html的实现代码,需要的朋友可以参考下。
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代码。
复制代码 代码如下:
<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代码。
您可能感兴趣的文章:
- jQuery如何将选中的对象转化为原始的DOM对象
- jQuery获取单击节点对象的方法
- jquery遍历json对象集合详解
- jQuery对象的链式操作用法分析
- 解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- phpQuery让php处理html代码像jQuery一样方便
- jquery 获取 outerHtml 包含当前节点本身的代码
- JQuery获取与设置HTML元素的内容或文本的实现代码
- jquery模拟LCD 时钟的html文件源代码
- Jquery在指定DIV加载HTML示例代码
- jQuery查看选中对象HTML代码的方法