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元素进行移动。只是我没有移动过。