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

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

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

• 
  

注意事项：

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

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

内部插入与外部插入的区别：

内部是指以父节点为对象，对其插入内容；而外部是以兄弟节点对其插入内容；

内部是插入子代，外部是插入兄弟关系的

DOM内部插入prepend()和prependTo()。

通过append和appendTo可在被选定元素的结尾（仍然在内部）插入指定内容。

通过prepend和prependTo被选元素之前插入。

内部操作四个方法的区别：

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

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

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

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

a.appendto(b),b.append（a）。
返回的元素不一样，第一种方法返回a元素，第二种方法返回b元素。

节点与节点之间又各种关系，包括父子、祖辈、兄弟关系。

上节课所讲内容为——内部插入处理：append()，appenTo()。

外部插入的处理，也就是兄弟之间的关系处理，在jQuery中引用了两个方法，可用来在匹配的元素前后插入内容。具体方法：

使用JavaScript创建div节点元素创建流程：

• 创建元素：document.createElement

• 设置属性：setAttribute

• 添加文本：innerHTML

• 加入文档：appendChild

通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。而通过使用jQuery简化了这个过程

jQuery创建元素节点的常见方法为（通过$()函数处理）：

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

动态创建的元素只是临时存放在内存中，最终要将该元素放到页面文档并呈现出来，常见的方法就是把这个新创建的元素当作页面的某一个元素的子元素放到其内部。针对这样的处理，jQuery定义了两个操作的方法：

append()和appendTo()。

$(A)append(B):把B追加到A中

$(A)appendTo(B):把A追加到B中。

这两种方法功能相同主要的是语法不同——内容和目标的位置不同。

都是往元素内部插入   只是插入的方法刚好相反。  $('#box').append('<p>这就是往id='box'的元素内部插入</p>')

$('<p>这也是往id='box'的元素内部插入，刚好把append方法倒过来了</p>').appendTo('#box')

嗯 ...相当于把括号内的内容互换个位置.

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

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

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

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

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

看一个简单的案例

<ul>
    <li>慕课网</li>
    <li>Aaron</li>
</ul>

开始迭代li，循环2次

$("li").each(function(index, element) {
     index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li
})

这样可以在循环体会做一些逻辑操作了，如果需要提前退出，可以以通过返回 false以便在回调函数内中止循

.add()：将内容添加到指定的集合

参数：DOM元素、jQuery对象、HTML片段引用

.siblings()：所有兄弟节点（不包括自己）

.prev()：紧挨着的上一个元素。

.next()：紧挨着的下一个兄弟元素

.closest()方法用于查找当前元素的祖辈中的一个元素

.closest()和.parents()的区别：

1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素

2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

.parents()：找到所选元素的祖辈元素

.children()、.find()、.parent()、.parents()都存在继承性，用的时候注意。

.parent()：找到所选中元素的父元素