jQuery插入节点的方法

好多时候我们都要在一些地方插入必要的节点，在jQuery中有如下几种方法，现在来介绍一下他们的用法和区别。


1、内部追加类

    append():向单个匹配的元素内部追加内容
                
                 例如：html：<p>我爱吃：</p>
                       jQuery：$('p').append("<b>苹果</b>");
                       结果：<p>我爱吃：<b>苹果</b></p>

    appendTo():将所有匹配的元素追加到指定的元素中，为之上方法的颠倒操作

                 例如：html：<p>我爱吃：</p>
                       jQuery：$("<b>苹果</b>").appendTo('p');
                       结果：<p>我爱吃：<b>苹果</b></p>

2、内部前置类

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

                 例如：html：<p>我爱吃：</p>
                       jQuery：$('p').predend("<b>苹果</b>");
                       结果：<p><b>苹果</b>我爱吃：</p>

    prependTo():将所有匹配的元素前置到指定的元素中，为之上方法的颠倒操作

                 例如：html：<p>我爱吃：</p>
                       jQuery：$("<b>苹果</b>").prependTo('p');
                       结果：<p><b>苹果</b>我爱吃：</p>

3、外部追加类

     after():在每个匹配的元素之后插入内容

                 例如：html：<p>我爱吃：</p>
                       jQuery：$('p').after("<b>苹果</b>");
                       结果：<p>我爱吃：</p><b>苹果</b>

     insertAfter():将所有匹配的元素插入到指定元素的后面，为之上方法的颠倒操作

                 例如：html：<p>我爱吃：</p>
                       jQuery：$("<b>苹果</b>").insertAfter('p');
                       结果：<p>我爱吃：</p><b>苹果</b>

4、外部前置类

    before():在每个匹配的元素之前插入内容

                 例如：html：<p>我爱吃：</p>
                       jQuery：$('p').before("<b>苹果</b>");
                       结果：<b>苹果</b><p>我爱吃：</p>

    insertBefore(): 将所有匹配的元素插入到指定的元素的前面，为之上方法的颠倒操作

                 例如：html：<p>我爱吃：</p>
                       jQuery：$("<b>苹果</b>").insertBefore('p');
                       结果：<b>苹果</b><p>我爱吃：</p>





插入节点的方法不仅可以创建节点，还可以对原有的DOM元素进行移动。只是我没有移动过。