DOM包裹wrapInner()方法

wrapInner()：将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素（给集合中匹配的元素的内部，增加包裹的HTML结构）

例子：

<div><a>p-a元素</a><a>p-a元素</a></div>
<div>p元素</div>

$('div').wrapInner('<p></p>')

//将div下的所有子元素用P包裹起来

结果：

<div>
    <p><a>p-a元素</a><a>p-a元素</a></p>
</div>
<div>
    <p>p元素</p>
</div>

.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

以上面案例为例，

$('div').wrapInner(function() {
    return '<p></p>'; 
})

结果：

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

DOM包裹wrapAll()方法

wrapAll()：wrap是针对单个dom元素处理，而wrapAll是将集合中的元素用指定元素包裹起来，即给他们增加一个父元素

例子：

<p>p元素</p>
<p>p元素</p>

$('p').wrapAll('<div></div>')

//给所有P元素增加一个div包裹

结果：

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

以上面案例为例，

$('p').wrapAll(function() {
    return '<div><div/>'; 
})

结果：

以上的写法的结果如下，等同于warp的处理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

DOM包裹unwrap()方法

unwrap()：将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

例子：

<div>
    <p>p元素</p>
</div>

$('p').unwrap();

//保留P元素，删除P元素的父元素div

结果：

<p>p元素</p>

DOM包裹wrap()方法

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构，即给指定元素添加父元素

例子：

<p>P元素</p>

$('p').wrap('<div></div>')

//给P元素添加一个div包裹

结果：

<div>

    <p>p元素</p>

</div>

.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

例子：

$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样

DOM替换replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

.replaceAll()和.replaceWith()功能类似，但是目标和源相反

.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

DOM拷贝clone()

例子：

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

注意：

1. clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据

2. clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色

DOM节点删除之detach()和remove()区别

DOM节点删除之保留数据的删除操作detach()

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

p = $("p").detach()

//把所有的P元素删除

$("body").append(p);

//通过append把删除的p元素放到页面上

DOM节点删除之empty和remove区别

empty方法

• 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

• empty不能删除自己本身这个节点

remove方法

• 该节点与该节点所包含的所有后代节点将同时被删除

• 提供传递一个筛选的表达式，删除指定合集中的元素

DOM节点删除之remove()的有参用法和无参用法

remove():通过remove方法移除div及其内部所有元素，remove内部会自动操作销毁绑定事件的方法，以防“内存泄漏”

A.remove()：删除A元素及其内部所有元素

例子：

$(".test1").remove()

remove表达式参数：remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点

例子：

$("p").remove(":contains('3')")

//找到所有内容包含“3”的P元素，并删除该元素及其内部所有元素

DOM节点删除之empty()的基本用法

A.empty(B):删除A元素中的B元素

例子：

$("#test").empty("P")

//通过empty移除了当前div元素下的所有p元素

//但是本身id=test的div元素没有被删除

DOM外部插入insertAfter()与insertBefore()

DOM内部插入prepend()与prependTo()

append与appendTo是在元素的所有子元素之后插入

prepend与prependTo是在元素的所有子元素之前插入

A.prepend(B):在A的所有子元素前面插入B元素（A是父节点，B是A的子节点）

例子：

$('.aaron1').prepend('<p>prepend增加的p元素</p>')

A.prependTo(B):把A元素插入B元素的所有子元素前面（B是父节点，A是B的子节点）

例子：

$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))

DOM外部插入after()与before()

A.before(B,C):在A元素前面插入B,C元素，BC元素跟A是同级，兄弟节点

例子：

$(".test1").before('<p >before,在匹配元素之前增加</p>', '<p >多参数</p>')

A.after(B,C):在A元素后面插入B,C元素，BC元素跟A是同级，兄弟节点

例子：

$(".test2").after('<p >after,在匹配元素之后增加</p>', '<p >多参数</p>')

DOM内部插入append()与appendTo()

A.append(B):把B插入A中

A.appendTo(B):把A插入B中

例子：

$(".content").append('<div class="append">通过append方法添加的元素</div>')

$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))