1.添加新元素
添加新元素的四个方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$(function(){
$("button").click(function(){
// $("p").append("在元素内容后边插入");
// $("p").prepend("在元素内容前面插入");
// $("p").before("在元素前面插入");
$("p").after("在元素后面插入");
})
})
也可以同时插入多个内容,使用","隔开
$(function(){ $("button").click(function(){ var text1="<p>第一项增加内容</p>"; var text2="<p>第二项增加内容</p>"; var text3="<p>第三项增加内容</p>"; $("p").after(text1,text2,text3); }) })
2.删除元素和内容
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
$(function(){
$("button").click(function(){
$("#ol1").remove();
$("#ol1").append("<li>ol1新添加的列表项</li>");
$("#ol2").empty().append("<li>ol2新添加的列表项</li>");
})
})
执行效果将看到,ol1使用了remove()方法之后,再在其内容末尾天机元素已经不成功,因为remove()方法删除了被选元素及其子元素。
而在ol2中使用了empty()方法之后仍然可以向其内容末尾后添加元素。说明empty()方法只是删除了被选中元素中的子元素。
其中,remove()方法和可以添加参数来对被删除元素进行过滤,
如需要删除class="myclass"的所有p元素,如下:
$("p").remove(".myclass");
本文参考资料来自:http://www.runoob.com/jquery/jquery-dom-add.html http://www.runoob.com/jquery/jquery-dom-remove.html