jQuery文档处理

内部插入

方法：ppend() 在被选元素的结尾插入内容（结束标签之前插入）

$('#div1').append('<p>向每个匹配的元素内部追加内容</p>')

$("#div1").append($("#p1"));

方法：appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中

$("<p>把所有匹配的元素追加到另一个指定的元素</p>").appendTo($("#div1"));

$("#p2").appendTo($("#div1"));

方法：prepend() 在被选元素的开头插入内容（开始标签之后插入）

$("#div1").prepend("<p>向每个匹配的元素内部前置内容。</p>");

$("#div1").prepend($("#p3"));

方法：prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中。

$("<p>把所有匹配的元素前置到另一个、指定的元素</p>").prependTo($("#div1"));

$("#p4").prependTo($("#div1"));

外部插入

方法：after() 在被选元素之后插入内容

$("#div1").after("<p>匹配的元素之后插入内容</p>");

$("#div1").after($("#p1"));

方法：insertAfter() 将被选元素插入到指定元素之后

$("<p>把所有匹配的元素插入到另一个、指定的元素元素集合的前面</p>").insertBefore($("#div1"));

            $("#p4").insertBefore($("#div1"));

方法: wrap() 指定的 HTML 元素来包裹每个被选元素

$("h1").wrap("<div id='div2' style='color:red'></div>");

            $("p").wrap($("#div2"));

            $("p").wrap(function(){

                // console.log(this);

               return "<div class='"+$(this).text()+"'></div>";

            });

方法:unwrap() 移除被选元素的父元素

$("h1").unwrap();

方法: wrapAll() 将所有匹配的元素用单个元素包裹起来 ，会破坏原有文档结构

$("p").wrapAll("<div id='div2' style='color:red'></div>");

            $("p").wrapAll(document.createElement("div"));//DOM元素

方法: wrapInner() 使用指定的 HTML 元素来包裹每个被选元素中的所有内容（innerHTML）

   $("p").wrapInner("<b></b>");

            $("p").wrapInner("<div></div>");

            $("p").wrapInner(document.createElement("b"));

            $("p").wrapInner(function(){

               return '<div class="' + $(this).text() + '" />';

            })

删除

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

$("#div1").empty();

方法：remove() 从 DOM 中删除所有匹配的元素，包括绑定的事件，附加的数据等

var objRemove= $(".pC1").remove();//所有移除的对象都在objRemove对象中

            console.log(objRemove);

方法：detach() 从 DOM 中删除所有匹配的元素，不包括绑定的事件、附加的数据等

var objDetach=$(".pC1").detach();

            console.log(objDetach);

替换

方法：replaceWith() 将所有匹配的元素替换成指定的 HTML 或 DOM 元素

$("p").replaceWith("<h5>标题5</h5>");

方法：replaceAll()

 $(content).replaceAll(selector) 用匹配的元素替换掉所有 selector 匹配到的元素

             $("<h5>标题5</h5>").replaceAll("p");

复制

方法：clone() 生成被选元素的副本，包含子节点、文本和属性

 $("#p4").clone().appendTo($("#div1"))