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"))/克隆

            })

 

 // click单击

  // dblclick 双击 中间空格隔开

            $("ul").on("click dblclick","li",function(){

                console.log($(this).text());

            })

所有都是点击事件用button按钮

ul li 显示列表内容一到五