关于DOM节点常用操作共有7种：
//节点：包括标签、内容

（1）创建节点；
（2）插入节点；
（3）删除节点；
（4）复制节点；
（5）替换节点；
（6）包裹节点；
（7）遍历节点；

（一）创建节点

var e = $("<li>CSDN博客</li>");或var $e = "<li>CSDN博客</li>";
$().append(e);
//类似于$().html();但又不同于html()
    区别：html()会覆盖原来内容，而append()是添加，不会覆盖原来的内容
//注意var $e = "<li>CSDN博客</li>";这里的$e只是一个命名规范，可以起任意名字，即var csdn = "<li>CSDN博客</li>";这样也对
//注意再写复杂的节点的时候：
因为添加进去的是一个字符串，所以会涉及到单双引号的问题
“单引号为最外层的字符串内部出现双引号”或“双引号为外层的字符串内部出现单引号”时，不需要进行转义。内部的双引号或者单引号就自动转义了，即在显示屏上显示的就是字符串内部的单或双引号。但是，“单引号内出现单引号”或“双引号内出现双引号”则必须进行转义

（二）插入节点

常见插入节点的方法共有4组：

（1）append()和appendTo()；
（2）prepend()和prependTo()；
//（1）（2）属于“内部插入节点”
（3）before()和insertBefore()；
（4）after()和insertAfter()；
//（3）（4）属于“外部插入节点”
/*******************************************/
插入标签内部：
（1）append()和appendTo()；
    {
        $(A).append(B)
        //表示在A的内部的末尾添加B
        $(A).appendTo(B)
        //表示将A加入到B的内部的末尾
        //注意，虽然上面两种方法差不多，但是，选择器的绑定位置变了
        即：$("#id").append("<li>CSDN</li>");与$("<li>CSDN</li>").appendTo("#id");
    }
（2）prepend()和prependTo()
    {
        $(A).prepend(B)
        //表示在A的内部的开始部分添加B
        $(A).prependTo(B)
        //表示在B的内部的开始部分添加A
        //注意，虽然上面两种方法差不多，但是，选择器的绑定位置变了
        即：$("#id").prepend("<li>CSDN</li>");与$("<li>CSDN</li>").prependTo("#id");
    }
插入到标签外面：
（3）before()和insertBefore()
    {
        $(A).before(B)
        //表示在A这个标签的外部的前面添加B
        $(A).insertBefore(B)
        //表示将A添加到B这个标签的外部的前面
        //注意：虽然这两种方法差不多，但是，选择器的绑定位置变了
        即：$("#id").before("<li>csdn</li>");与$("<li>csdn</li>").insertBefore("#id");
    }
（4）after()和insertAfter()
    {
        $(A).after(B)
        //表示在A标签的外部的后面添加B
        $(A).insertAfter(B)
        //表示将A添加到B标签的外部的后面
        //注意：虽然这两种方法差不多，但是，选择器的绑定位置变了
        即：$("#id").after("<li>csdn</li>");与$("<li>csdn</li>").insertAfter("#id");
    }
//综上：以上函数可以分为完全等价的两组    
即：
//第1组//A添加B
append()、prepend()、before()、after()
//第2组//B添加到A
appendTo()、prependTo()、insertBefore()、insertAfter()

//小技巧：实现定点插入
{
在一个列表中实现定点插入：
即：

<ul>
    <li></li>
    <li></li>
</ul>   
实现在第一个li后面添加元素
首先用append或prepend肯定不行，因为他们的插入位置是固定的最前面和最后面
用after和before可以，因为他们的意思是在绑定的选择器之前或之后插入
所以想要实现定点插入，只需要绑定所需要插入的标签的位置即可
即：$("ul li:first-child").after("<li>CSDN</li>");
这样就可以实现定点插入咯

}
（三）删除节点

删除节点，有3种方法：

（1）remove()；
（2）detach()；
（3）empty()；
/********************************************/
（1）remove()
    {
        remove()方法将某个节点彻底删除。
        $(A).remove()
        //返回值为删除的jQuery节点对象
    }
（2）detach()
    {
        detach()方法将某个节点半彻底删除
        $(A).detach()
        //返回值为删除的jQuery节点对象
    }
    //区分remove()和detach()
    如果一个节点绑定了一个点击事件，那么remove()是将这个节点的所有全部删除，即其所绑定的事件也被删除，即使
                //删除“jQuery”这一个li元素
                var $li = $("#id").remove();
                //将删除的li元素在添加到ul元素内部的末尾
                $($li).appendTo("#id");
      像上面这个样子又将节点添加回去，其所绑定的点击事件也没有了
      但是如果这样子
                //删除“jQuery”这一个li元素
                var $li = $("#id").detach();
                //将删除的li元素在添加到ul元素内部的末尾
                $($li).appendTo("#id");
      这样子的话将节点添加回去，其绑定的点击事件是可以使用的，即其绑定的事件并没有被删除
（3）empty()
     {
         “清空”某个节点，是清空不是删除
         $(A).empty()
         //返回值为清空的jQuery节点对象
         //但是这个返回值不能像remove()与detach()的返回值似的用$().after()在装填回去
         //此返回值不能用来装填回去
         //如果想要装填回去，只能装填原来的源代码，用append()或html()方法
     }
     //区分清空和删除
     清空是清空标签内部所有，标签本身还是存在的，并且绑定的事件没有被删除
     删除是把包括标签在内的所有全部删除，其中remove()会把时间删除，detach()不会删除事件

（四）复制节点

$(A).clone()
//clone()方法有一个布尔参数，默认值为false。

$(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。

$(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。

//var obj=$(A).clone()//返回值是一个对象，可作为那些append(obj)等中的obj信息

（五）替换节点

有2种方法：

（1）replaceWith()；
（2）replaceAll()；
/*******************************************/
(1)replaceWith()
    {
        replaceWith()方法可以将所选元素被替换成其他元素。
        $(A).replaceWith(B)
        //表示用B来替换A、
        这个替换会将A中原来所有信息全部替换，相当于重置了html，即替换标签的外层使用一个html()函数
    }
（2）replaceAll()
    {
        replaceAll()方法可以将所选元素被替换成其他元素。
        $(A).replaceAll(B)
        //表示用A来替换B
    }
    //以上两种方法是等价的，不同的是选择器的位置不一样而已
    //如果在替换节点之前，我们已经为元素绑定事件了，使用replaceWith()或replaceAll()之后，该元素所绑定的事件会消失。因此我们如果想要保留事件的话，则需要在新元素上重新绑定事件。

（六）包裹节点
将某个节点用其他标签包裹起来，共有3种方法：(所谓包裹，就是在其外层或内层嵌套一个其他标签，这样看上去，就好像被包裹了一样)

（1）wrap()；
（2）wrapAll()；
（3）wrapInner()；
/****************************************/
（1）wrap()
    {
        $(A).wrap(B)
        //表示将A元素使用B元素包裹起来。
        //例：
        $("strong").wrap("<em></em>")
        //注意选择器与内容的书写方式
    }
（2）wrapAll()
    {
        $(A).wrapAll(B)
        //表示将A元素整体使用B包裹起来
        //例：
        $("strong").wrapAll("<div></div>")
    }
//wrap()与wrapAll()的区别
wrap()是将每一个标签一个个单独用一个标签包裹起来，并不打乱布局
wrapAll()是将所有要包裹的标签汇总后，然后用一个标签包裹起来，即，脱离了文档流布局
（3）wrapInner()
    {
        wrapInner()方法表示将所选元素“所有内部元素”使用某个标签包裹起来。
        $(A).wrapInner(B)
        //将A的内部的所有内容用B包裹起来，但B不包裹A
        //例：
        $("strong").wrapInner("<em></em>")
    }
//wrap()与wrapInner()方法的关系类似于append()与after()方法的关系

（七）遍历节点
在JavaScript中，我们往往都是先获取元素的长度，然后使用循环语句来访问每一个元素，代码相对复杂。
而在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。

$().each(callback)
//注意：参数callback是一个function函数。该函数可以接受一个形参index，此形参为遍历元素的序号（从0开始）。如果需要访问元素中的属性，可以借助形参index，然后配合this关键字来实现元素属性的获取和设置。
即：完整形式是：
$().each(function(index){
      /**函数体**/
})
例：
 $("li").each(function (index) {
        var txt = "这是第" + (index + 1) + "个li元素";
         $(this).text(txt);
     });
     //index只是起到了一个显示下标的作用，真正在遍历中对每一项进行操作的是this指针，在函数执行的过程中，index是变化的，每一个this对应于每一个以index为下标的项