jQuery之文档处理

本次分享的主要是jQuery中关于DOM节点的插入、包裹、替换和删除相关的API，欢迎持续关注小伍前端，每周两篇（周三和周六持续推送）。

一、内部插入

1、append(content|fn) 向每个匹配的元素内部追加内容

：要追加到目标的内容

：返回一个HTML字符串，用于追加到每一个匹配元素的里边

例：

结果：

I want to say:I like money

2、appendTo(content) 把所有匹配的元素追加到另一个指定的元素集合中

例：

结果：

I like money

I like money

3、prepend(content|fn) 向所有匹配元素的内部的开始出插入内容

例：

结果：

I want to sayI like money

4、prependTo(content) 该方法颠倒了prepend()方法的操作，作用相同

例：

结果：

I want to sayI like money

二、外部插入

1、after(content|fn) 在每个匹配的元素之后插入内容

：插入到每个目标后得内容

例：

结果：

I would like to say:

Hello

：必须返回一个html字符串

2、before(content|fn) 在每个匹配的元素之前插入内容

例：

结果：

Hello

I would like to say:

3、insertAfter(content) 作用同after(),只是颠倒了常规的操作

例：

结果：

I would like to say:

Hello

4、insertBefore(content) 作用同before(),只是颠倒了常规的操作

例：

结果：

Hello

I would like to say:

三、包裹

1、wrap(html|ele|fn) 给匹配的每个元素都添加一个父元素

:用于动态生成元素并包裹目标元素

例：

:用于包装目标元素的DOM元素

例：

：生成包裹结构的一个函数

例：

结果：

2、unwrap() 把匹配的元素的父元素移除

例：

结果：

3、wrapAll(html|ele) 给所有匹配的元素用单个元素包裹起来

例：

结果：

4、wrapInner(html|ele|fn)

:用于动态生成元素并包装目标元素

例：

结果：

:用于包装目标元素的DOM元素

例：

：返回包裹结构的一个函数

例：

结果:

四、替换

1、replaceWith(content|fn)将所有匹配的元素替换成指定的HTML或DOM元素（是直接替换并非复制替换）

例：

结果：

And

Hello

".first"

2、replaceAll(selector)用匹配的元素替换掉所有selector匹配到的元素

例：

结果：

worldworld

五、删除

1、empty()删除匹配的元素几何中所有的子节点

例：

结果：

2、remove([expr])

从DOM中删除所有匹配的元素(这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。)

例：

结果：

3、detach([expr])

从DOM中删除所有匹配的元素(这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。)

例：

结果：

六、复制

1、clone(true/false) 克隆匹配的DOM元素并且选中这些克隆的副本

例：

结果：

创建一个按钮，他可以复制自己，并且它的副本也有同样功能

以上是本次分享内容，喜欢的就点个赞吧^-^