Jquery—添加、删除元素

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