append()与appendTo()

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

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

.on('click',function(){})

.click(function(){})

addEventListener('click','function(){}')

addEventListener

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

将if (!$("p").length) return; //去重 去掉后，如果连续点击两次删除后再点击还原就再也回不来了

原因是连续执行两次detach（）后x被清空了

 x=$("p").detach()//执行一次x还可以打印出来

 x=$("p").detach()//再执行一次x为空

.append()     .prepend()      .after()    .before()   

都是方法（函数）在前，内容（参数）在后 可以支持多参数；

.appendTo()   .prependTo()    .insertBefore()  .insertAfter()   都是内容（参数）在前，函数（方法）在后，不支持多参数

原来你是这样的appendTo，用完后是要破坏原本的结构的，把人家的li拉来自家了

A.replaceWith(B)返回的还是未替换前A的节点；

A.replaceALL(B)返回的是用于替代的A的节点；

注意事项：在使用的时候需要特别注意下

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

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

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

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

.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

eg.

简单的看一段代码：

<p>p元素</p>
<p>p元素</p>

给所有p元素增加一个div包裹

$('p').wrapAll('<div></div>')

最后的结构，2个P元素都增加了一个父div的结构

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

通过回调的方式可以单独处理每一个元素

以上面案例为例，

$('p').wrapAll(function() {
    return '<div><div/>'; 
})

以上的写法的结果如下，等同于warp的处理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

总结：

• .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别

• .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

• .replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用

• .replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

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

如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中

//通过empty处理
$('.hello').empty()

//结果：<p>慕课网</p>被移除
<div class="hello"></div>

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

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

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

注意点：

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

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

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

简单的总结就是：

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

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