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

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

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

注意点：

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

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

1.在这里如果先运行第一个按钮的话，会把原有的<p>新的p元素</p>加入到<li>合集中，这里加入到合集意思是使p和li能共享css，add之后会返回一个jq对象，这个对象包括li和p，所以先运行第一个按钮的话，背景都会变成红色。
2.先运行第二个按钮的话，会动态创建一个p元素，并且add后返回一个jq对象，该对象包括li和p。因为新创建的p并没有加入到html中来，所以并不会显示，所以appendTo后，会把jq对象加入到.right中来，所以就会出现所有的元素都不在原来的绿框中了 

 $('.item-2').siblings(':last').css('border', '2px solid blue')

按照筛选顺序，先找出所有的.item-2，然后找到所有的siblings元素，然后再找出:last那个

$('父').find('子') = $('子','父')

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

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

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

创建元素节点：

$("<div></div>")

创建为本节点：

$("<div>我是文本节点</div>")

创建为属性节点：

$("<div id='test' class='aaron'>我是文本节点</div>")

我们通过jQuery把上一届的代码改造一下，如右边代码所示

一条一句就搞定了，跟写HTML结构方式是一样的

$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

remove：移除节点

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

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

detach：移除节点

• 移除的处理与remove一致

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

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

empty方法

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

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

remove方法

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

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

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面

• .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面

• before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

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

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

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

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

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

a.prepend(b): a中插入b，并b作为第一个元素

a.prependTo(b): a插入到b中，并且a作为第一个元素

a.append(b): a中插入b，并b作为最后一个元素

a.appendTo(b): a插入到b中，并且a作为最后一个元素

Q的appendTo() 的存在有意义吗?

如上 在实际项目中适合怎么写 感觉两个都没啥区别

2017-07-07源自：jQuery基础(二)—DOM篇... 3-1219 浏览2 回答

最佳回答

2017-07-08

a.appendto(b),

如果参数b很长，换成b.append（a）来书写能增加代码的可读性，只能想到这点区别了。。。

 horistardust 

+3积分什么是积分？

举报 回复  2

horistardust

看了阮老师的博客回来修改一下答案：表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回a元素，第二种方法返回b元素。你可以根据需要，选择到底使用哪一种方法。

页面中整体代码的意思是 先在body中添加右盒子（即rightdiv） 再在右盒子里添加（rightaaron）。

2017-07-16

举报 回复  0

muke_Lat

JS事件响应分为：捕获阶段，目标阶段，冒泡阶段。此触发函数中：当参数为flase时，事件在冒泡阶段（内层到外层）执行；当参数为ture时，事件在触发阶段（外层到内层）执行。

append,appendTo

目标元素内部结尾插入对象,

对象插入目标内部结尾

prepend,prependTo

目标内部前置插入对象,

对象插入目标内部前置.

after,insertAfter

目标后置插入兄弟节点对象,

对象以兄弟节点插入目标后置

before,insertBefore

目标前置插入兄弟节点对象

对象以兄弟节点插入目标前置

remove()和detach()的区别：

通过一张对比表来解释2个方法之间的不同

remove：移除节点

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

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

detach：移除节点

• 移除的处理与remove一致

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

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