Dom操作

 //内部插入 => 子节点

            $(".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").after("<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"));

            })