如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，绑了多少事件，不用的时候一定要记得销毁。

通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。

通过右边代码可以看到prepend与prependTo的使用及区别：

• .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).

• .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同

• 对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数

• 而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

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

• append()向每个匹配的元素内部追加内容

• prepend()向每个匹配的元素内部前置内容

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

• prependTo()把所有匹配的元素前置到另一个指定的元素集合中

注意点：

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

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

选择器的描述：

• before与after都是用来对相对选中元素外部增加相邻的兄弟节点

• 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面

• 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同

append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象

创建流程比较简单，大体如下：

1. 创建节点(常见的：元素、属性和文本)

2. 添加节点的一些属性

3. 加入到文档中

流程中涉及的一点方法：

• 创建元素：document.createElement

• 设置属性：setAttribute

• 添加文本：innerHTML

• 加入文档：appendChild

如右边代码所示，写一个最简单的元素创建，我们会发现几个问题：

1. 每一个元素节点都必须单独创建

2. 节点是属性需要单独设置，而且设置的接口不是很统一

3. 添加到指定的元素位置不灵活

4. 最后还有一个最重要的：浏览器兼容问题处理

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

remove：移除节点

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

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

detach：移除节点

• 移除的处理与remove一致

• 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

• 例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

DOM节点删除之empty和remove区别

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

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

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

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。

这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。

.after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。

注意事项：

• insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；

• insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

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

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