本文内容有：

1. DOM内部插入append()与appendTo()
2. DOM内部插入prepend()与prependTo()
3. DOM外部插入after()与before()
4. DOM外部插入insertAfter()与insertBefore()
5. DOM节点删除之empty()的基本用法
6. DOM节点删除之empty和remove区别
7. DOM节点删除之保留数据的删除操作detach()
8. DOM节点删除之detach()和remove()区别

（一）DOM内部插入append()与appendTo()

创建节点及节点属性

• 创建元素：document.createElement
• 设置属性：setAttribute
• 添加文本：innerHTML
• 加入文档：appendChild

几个问题：

1. 每一个元素节点都必须单独创建
2. 节点是属性需要单独设置，而且设置的接口不是很统一
3. 添加到指定的元素位置不灵活
   最后还有一个最重要的：浏览器兼容问题处理

jQuery节点创建与属性的处理

1. 把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$(“html结构”)；
   eg：

   1 2	var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>") $body.append(div)

（二）DOM内部插入prepend()与prependTo()

方法详解：

• .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
• .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
• 对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数
• 而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

这里总结下内部操作四个方法的区别：

• append()向每个匹配的元素内部追加内容
• prepend()向每个匹配的元素内部前置内容
• appendTo()把所有匹配的元素追加到另一个指定元素的集合中
• prependTo()把所有匹配的元素前置到另一个指定的元素集合中

1
2
3
4
5
6
7

//找到class="aaron1"的div节点
//然后通过prepend在内部的首位置添加一个新的p节点 
$('.aaron1').prepend('<p>prepend增加的p元素</p>')

//找到class="aaron2"的div节点
//然后通过prependTo内部的首位置添加一个新的p节点
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))

（三）DOM外部插入after()与before()

|:—|:—|
|.after(content)|在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点|
|.before(content)|在匹配元素的前面插入内容|

• before与after都是用来对相对选中元素外部增加相邻的兄弟节点
• 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
• 2个方法都支持多个参数传递after(div1,div2,….) 可以参考右边案例代码

注意点：

• after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
• before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入

（四）DOM外部插入insertAfter()与insertBefore()

|:—|:—|
|.insertBefore(content)|在匹配元素前面插入集合中每个匹配的元素|
|.insertAfter(content)|在匹配元素后面插入集合中每个匹配的元素|

1
2
3
4
5
6
7

//在test1元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1")) 

//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))

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

这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。

过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法

1
2
3
4

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

remove表达式参数：
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点
我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则处理

1
2
3
4
5
6
7

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

$("button:last").on('click', function() { 
        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
})

（六）DOM节点删除之empty和remove区别

要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别
empty方法

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

remove方法

• 该节点与该节点所包含的所有后代节点将同时被删除
• 提供传递一个筛选的表达式，删除指定合集中的元素

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

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理
detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。
来看看jquery官方文档的解释：
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。
当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

1
2
3
4
5

if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()

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

remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了
 通过一张对比表来解释2个方法之间的不同

remove：移除节点

• 无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
• 有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点

• 移除的处理与remove一致
• 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
• 例如：$(“p”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。