jQuery04-DOM操作

DOM操作：

内部插入=>子节点

append appendTo   在所有子元素后面追加内容

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

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

            })

prepend   在所有子元素前面添加内容

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

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

            })

外部插入=>兄弟节点

before  在所有元素的上面

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

                // 在ul上面

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

            })

after   在所有元素的下面

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

                // 在ul下面

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

            })

 

包裹=>父节点

wrap   在所选的元素上添加样式

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

                //添加样式

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

            })

修改/替换

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

 

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

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

            })

删除

empty 清空子元素的内容

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

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

            })

remove 删除子元素

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

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

            })

克隆

clone   在元素后面复制想复制的内容

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

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

            })