11.11

DOM操作

 

 

$(function(){

            //内部插入  =>子节点

            $(".append").click(function(){

                // 后面

                $("ul").append("<li>列表 append</li>");

                // $("<li>列表append</li>").appendTo($("ul"));

            })

            $(".prepend").click(function(){

                //前面

                $("ul").prepend("<li>列表 prepend</li>");

            })

            //外部插入 => 兄弟节点

            $(".before").click(function(){

                //上面

                $("ul").before("<li>列表 before</li>");

            })

            $(".after").click(function(){

                //下面

                $("ul").before("<li>列表 after</li>");

            })

            // 包裹  =>  父节点

            $(".wrap").click(function(){

                $("ul").wrap("<div style='color:red'></div>");

            })

            // 修改

            $(".replaceWith").click(function(){

                $("li:first").replaceWith("<li>列表 new</li>");

            })

            // 删除

            $(".empty").click(function(){

                //清空内容

                $("li:first").empty();

            })

            $(".remove").click(function(){

                //删除元素

                $("li:first").remove();

            })

            $(".clone").click(function(){

                $("li:first").clone().appendTo($("ul"))

            })

})