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

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

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

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

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

DOM内部插入prepend()与prependTo()

通过append与appendTo插入指定内容外,

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

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

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

$("#bt1").on('click', function() {
        //在匹配test1元素集合中的每个元素前面插入p元素
        $(".test1").before('<p >before,在匹配元素之前增加</p>', '<p >多参数</p>')

    })

$("#bt2").on('click', function() {
        //在匹配test1元素集合中的每个元素后面插入p元素
        $(".test2").after('<p >after,在匹配元素之后增加</p>', '<p >多参数</p>')

    })

DOM外部插入after()与before()

$("#bt1").on('click', function() {
            //.append(), 内容在方法的后面，
            //参数是将要插入的内容。
            $(".content").append('<div class="append">通过append方法添加的元素</div>')

        })

appendTo()

$("#bt2").on('click', function() {
            //.appendTo()刚好相反，内容在方法前面，
            //无论是一个选择器表达式 或创建作为标记上的标记
            //它都将被插入到目标容器的末尾。
            $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
        })

DOM内部插入append()与appendTo()

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

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

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

js创建节点：

 var body = document.querySelector('body');

     document.addEventListener('click',function(){

     //创建2个div元素
     var rightdiv = document.createElement('div')
     var rightaaron = document.createElement("div");

    //给2个div设置不同的属性
     rightdiv.setAttribute('class', 'right')
     rightaaron.className = 'aaron'
     rightaaron.innerHTML = "动态创建DIV元素节点";

   // 2个div合并成包含关系
  rightdiv.appendChild(rightaaron)

    // 绘制到页面body
    body.appendChild(rightdiv)

     },false)

jQUery创建元素节点：

通过$()函数处理，$("html结构")

创建为本节点：

与创建元素节点类似，可以直接把文本内容一并描述

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

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

document.addEventListener('click',function(){     },false) ,

后面的false是阻止捕获，true对应的是捕获机制，

<div onclick="functionb">

        <div onclick = "functiona">

                        点击先触发哪个事件？

        </div>

</div>

点击文本两个div事件同时响应，此时先后顺序是:

如果为false 则阻止捕获，先响应functiona,在响应functionb，否则，响应顺序相反。

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

                 

• clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色

• 通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上

• clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据

• 元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个

remove：移除节点

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

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

detach：移除节点

• 移除的处理与remove一致

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

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

  var p = $("p").detach()
  

         $body.append(p);//这样刚才消失的p标签又回来了

删除节点中empty,remove的方法区别：

empty:

严格来说，empty并不是删除节点，只是可以清空节点，清空节点的所有后代节点

remove:

可以删除节点和其包含的后代节点，还可以选择性的删除指定元素

remove(":contains('2')");

jQuery插入方法分两大类：一类是内部插入这种插入一般是作为子节点插入的，

内部插入方法:

append,appendTo：A append B是A追加B，B是子节点

A appendTo B   这个是A追加到B,此时是A为子节点

prepend(),prependTo()和append效果相反，append是追加到末尾，而prepend()是把子节点追加到节点的内部开始位置。

还有一类是外部插入，这种插入一般是作为兄弟节点的

外部插入:after,before,insertAfter,insertBefore

A after B ,是把B放到A后面

A insertAfter B 是把A插入到B后面

同理before和insertBefore方法效果类似

$("其中直接放入html代码")如$("<div>sss</div>")

就相当于创建好了一个jQuery对象了，可以通过$body.append(对象)增加一个节点了

js中创建一个节点的流程:

创建元素document.createElement

设置属性setAttribute(可以设置class)，

class也可以通过className来设置

添加文本innerHTML

加入文档appendChild()