DOM操作

一、文档处理 

内部插入 =>子节点

append  向每个匹配的元素内部追加内容

appendTo  把所有匹配的元素追加到另一个指定的元素元素集合中。

 $(".append").click(function(){
                $("ul").append("<li>列表 append</li>")
                // $("<li>列表 append</li>").appendTo($("ul"));
            })

prepend  向每个匹配的元素内部前置内容。

prepend  把所有匹配的元素前置到另一个、指定的元素元素集合中。

 $(".prepend").click(function(){
                $("ul").prepend("<li>列表 prepend</li>")
                 // $("<li>列表 prepend</li>").prependTo($("ul"));
            })

外部插入=>兄弟节点

 

before  在每个匹配的元素之前插入内容。

 $(".before").click(function(){
                $("ul").before("<li>列表 before</li>")
            })

after  在每个匹配的元素之后插入内容。

  $(".after").click(function(){
                $("ul").after("<li>列表 after</li>")
            })

包裹=>父节点

 

wrap  把所有匹配的元素用其他元素的结构化标记包裹起来

  

 $(".wrap").click(function(){
                $("ul").wrap("<div style='color:pink'></div>")
            })

修改

 

replaceWith   将所有匹配的元素替换成指定的HTML或DOM元素。

  $(".replaceWith").click(function(){
                $("li:first").replaceWith("<li>列表 new</li>")
            })

删除

remove   从Dom中删除所有匹配的元素    删除

empty()   删除匹配的元素集合中所有的子节点。  清空

 $(".remove").click(function(){
                $("li:first").remove()
            })
            $(".empty").click(function(){
                $("li:first").empty()
            })

克隆

clone  克隆匹配的DOM元素并且选中这些克隆的副本。

 $(".clone").click(function(){
                $("li:first").clone().appendTo($("ul"))
            })

 

// $("li").click(function(){
            //     console.log($(this).text())
            // })

            // $("ul").on("click","li",function(){
            //     console.log($(this).text())
            // })
            // 可以绑定多个事件  多个事件用空格隔开
            $("ul").on("click dbclick","li",function(){
                console.log($(this).text())
            })

            // $("li:first")
            // $("li").first()