一. 创建节点

1.1 创建元素节点

var $li1 =$("<li>");    //创建一个li节点

1.2 创建文本节点

var $li1 =$("<li>JavaScript</li>");    //创建一个li节点和一个文本节点。元素节点和文本节点一起创建的

1.3 创建属性节点

var $li1 = $("<li id='js'>javaScrpt</li>"); //创建属性节点同元素节点文本节点一起创建

二. 插入节点

a.append(b) : 向a中追加一个b

a.appendTo(b) : 把a追加的b中

a.prepend(b): 在a中的最前面追加b

a.prependTo(b): 把a追加到b的最前面

a.after(b) : 在a元素的后面插入一个b

a.before(b) : 在a元素的前面插入一个b

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                var $li1 = $("<li id='js'>javaScrpt</li>");
                var $ul = $("ul");
//                $ul.append($li1);  //向ul中追加一个li标签。 插入之后 li是ul的子标签
//                $li1.appendTo($ul);  // 将$li1追加到$ul中。  其实是颠倒了append的逻辑
//                $ul.prepend($li1);  //向ul的最前面追加一个li标签
//                $ul.after($li1);  //在匹配的元素之后插入。  插入之后li是ul的兄弟标签
                $ul.before($li1);  ////在匹配的元素之前插入。  插入之后li是ul的兄弟标签
            })    
        </script>
    </head>
    <body>
        <ul>
            <li>c++</li>
        </ul>
    </body>
</html>

三. 包裹节点

b.wrap(a) 每一个b分别用一个a包裹

b.wrapAll(a) 所有的b用同一个a包裹，如果有其他元素则扔到包裹的后面

b.wrapInner(a) 用a去包裹b的内容。不包裹b这个标签本身。

b.unwap() 去除b的父元素

四. 移除节点

remove() 删除这个节点，绑定的事件会丢失。干掉自己

detach() 删除节点，但是绑定的事件还在干掉自己

empty() 清空这个节点的所有内容。但是这个节点还在。干掉所有的后代

五. 替换节点

a.replaceWith(b): a每个元素都用一个b去替换 b干掉a

a.replaceAll(b) : 用a去把满足b的每一个替换掉。 a干掉b

六. 复制节点

clone(自己的事件和数据是否复制, 后代的事件和数据是否复制)

复制节点: 两个参数默认都是false

4.DOM节点操作