//只克隆节点

    //不克隆事件

    $(".bt1").on('click', function() {

        //找到内容为第二段的p元素

        //通过replaceWith删除并替换这个节点

        $(".right > div:first p:eq(1)").replaceWith('<a >replaceWith替换第二段的内容</a>')

    })

//找到内容为第六段的p元素

    //通过replaceAll删除并替换这个节点

    $(".bt2").on('click', function() {

        $('<a >replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');

    })

 //给页面上2个p元素都绑定时间

    $('p').click(function(e) {

        alert(e.target.innerHTML)

    })

    $("button:first").click(function() {

        var p = $("p:first").remove();

        p.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失')

        $("body").append(p);

    });

    $("button:last").click(function() {

        var p = $("p:first").detach();

        p.css('color','blue').text('p2通过detach处理后,点击该元素事件存在')

        $("body").append(p);

    });

$("#bt1").click(function() {

        if (!$("p").length) return; //去重

        //通过detach方法删除元素

        //只是页面不可见，但是这个节点还是保存在内存中

        //数据与事件都不会丢失

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

    });

$("#bt2").click(function() {

        //把p元素在添加到页面中

        //事件还是存在

        $("body").append(p);

    });

 $("button:first").on('click', function() {

        //删除整个 class=test1的div节点

        $(".test1").remove()

    })

$("button:last").on('click', function() {

        //找到所有p元素中，包含了3的元素

        //这个也是一个过滤器的处理

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

    })

<script type="text/javascript">

    $("button").on('click', function() {

        //通过empty移除了当前div元素下的所有p元素

        //但是本身id=test的div元素没有被删除

        $("#test").empty()

    })

    </script>

$("#bt1").on('click', function() {

        //在test1元素前后插入集合中每个匹配的元素

        //不支持多参数

        $('<p >测试insertBefore方法增加</p>', '<p >多参数</p>').insertBefore($(".test1"))

    })

$("#bt2").on('click', function() {

        //在test2元素前后插入集合中每个匹配的元素

        //不支持多参数

        $('<p >测试insertAfter方法增加</p>', '<p >多参数</p>').insertAfter($(".test2"))

    })

//在多添加一个div，而before可以添加多个

  $("#bt1").on('click', function() {

        //找到class="aaron1"的div节点

        //然后通过prepend在内部的首位置添加一个新的p节点

        $('.aaron1').prepend('<p>prepend增加的p元素</p>')

    })

$("#bt2").on('click', function() {

        //找到class="aaron2"的div节点

        //然后通过prependTo内部的首位置添加一个新的p节点

        $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))

    })

$("#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>')

    })

$("#bt1").on('click', function() {

    //.append(), 内容在方法的后面，

    //参数是将要插入的内容。

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

    })

$("#bt2").on('click', function() {

    //.appendTo()刚好相反，内容在方法前面，

    //无论是一个选择器表达式 或创建作为标记上的标记

    //它都将被插入到目标容器的末尾。

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

    })

 var $body = $('body');

    $body.on('click', function() {

        //通过jQuery生成div元素节点

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

        $body.append(div)

    })

DOM外部插入

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

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

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

DOM内部插入

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

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

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

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

.parents()和.closest()

相似点：都是往上遍历祖辈元素；

区别是:

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

  b、遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，

.closest向上查找，直到找到一个匹配的就停止查找，

.parents一直查找到根元素，并将匹配的元素加入集合

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

     .parents返回的是包含零个或一个或多个元素的jquery对象

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

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象,通过回调的方式可以单独处理每一个元素.

通过wrap方法给选中元素增加一个包裹的父元素。

通过unwrap()方法 ，将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。