JQuery文档处理：

1.内部插入 =>子节点

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

这个操作与对指定的元素执行appendChild方法，

将它们添加到文档中的情况类似。

例：

            $(".append").click(function () {                 $("ul").append("<li>列表 append</li>");                 $("<li>列表 append</li>").appendTo($("ul")); 相反             }) HTML内容： <button class="append">append</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>   prepend：向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

例：

            $(".prepend").click(function () {                 $("ul").prepend("<li>列表 prepend</li>");             }) HTML内容： <button class="prepend">prepend</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>   2.外部插入 =>兄弟节点 before：在每个匹配的元素之前插入内容。 例： $(".before").click(function(){
                $("ul").before("<li>列表 before</li>");   }) HTML内容： <button class="before">before</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>   after：在每个匹配的元素之后插入内容。 例：  $(".after").click(function(){                 $("ul").after("<li>列表 after</li>");   }) HTML内容： <button class="after">after</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>   3.包裹 => 父节点 wrap：把所有匹配的元素用其他元素的结构化标记包裹起来。 例：  $(".wrap").click(function(){                 $("ul").wrap("<div style='color:red'></div> ");  }) HTML内容： <button class="wrap">wrap</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>   4.替换 replaceWith：将所有匹配的元素替换成指定的HTML或DOM元素。 例：  $(".replaceWith").click(function(){                 $("li:first").replaceWith("<li>列表 new</li> ");   }) HTML内容： <button class="replaceWith">replaceWith</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>   5.删除 empty：删除匹配的元素集合中所有的子节点。 例：  $(".empty").click(function(){                  $("li:first").empty();             }) HTML内容： <button class="empty">empty</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>   remove：从DOM中删除所有匹配的元素。 例： $(".remove").click(function(){                  $("li:first").remove();             }) HTML内容： <button class="remove">remove</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>   6.复制 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") 委托事件             $("ul").on("click dbclick","li",function(){                 console.log(this).text()             })
            //             // $("li:first") = $("li").first()             // HTML内容：  <button class="clone">clone</button>  <ul>         <li>列表1</li>         <li>列表2</li>         <li>列表3</li>         <li>列表4</li>         <li>列表5</li>     </ul>