jQuery插入节点的方法

阅读更多

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


1、内部追加类

    append():向 单个匹配的元素内部追加内容
                
                 例如：html：

我爱吃：

                       jQuery：$('p').append("苹果");
                       结果：

我爱吃：苹果

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

                 例如：html：

我爱吃：

                       jQuery：$("苹果").appendTo('p');
                       结果：

我爱吃：苹果

2、内部前置类

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

                 例如：html：

我爱吃：

                       jQuery：$('p').predend("苹果");
                       结果：

苹果我爱吃：

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

                 例如：html：

我爱吃：

                       jQuery：$("苹果").prependTo('p');
                       结果：

苹果我爱吃：

3、外部追加类

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

                 例如：html：

我爱吃：

                       jQuery：$('p').after("苹果");
                       结果：

我爱吃：

苹果

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

                 例如：html：

我爱吃：

                       jQuery：$("苹果").insertAfter('p');
                       结果：

我爱吃：

苹果

4、外部前置类

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

                 例如：html：

我爱吃：

                       jQuery：$('p').before("苹果");
                       结果：苹果

我爱吃：

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

                 例如：html：

我爱吃：

                       jQuery：$("苹果").insertBefore('p');
                       结果：苹果

我爱吃：

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