Jquery添加元素，各个方法及区别

不要再搞混了！！！！
接下来的例子以这个代码为基础

<p>hello</p>

1.append的用法

• 选中目标的里面的后面插入内容

$("p").append("<b>world</b>")  //插入语句

<p>hello<b>world</b></p>  //结果

2.prepend的用法

• 选中目标的里面的前面插入内容

$("p").prepend("<b>world</b>")  //插入语句

<p><b>world</b>hello</p>    //结果

3.after的用法

• 被选元素的外面的后面插入内容

$("p").after("<b>world</b>")//插入语句

<p>hello</p><b>world</b>//结果

4.before的用法

• 被选元素的外面的前面插入内容

$("p").before("<b>world</b>")//插入语句

<b>world</b><p>hello</p>//结果

5.append & appendTo区别(主要是插入指定内容位置不同)

• append ：前面是指定的元素，后面面是要新插入的内容
• appendTo : 前面是要新插入的内容 , 后面是指定的元素

(1) append()方法：

$("p").append("<span>测试</span>");  

<p>hello<span>测试</span></p> //结果

(2) appendTo()方法：

$("<span>测试</span>").appendTo("p");   

<p>hello<span>测试</span></p> //结果

6.insertBefore & before & insertAfter & after(主要是插入指定内容位置不同)

• insertAfter & insertBefore： 前面是要新插入的内容 , 后面是指定的元素
• after & before： 前面是指定的元素，后面面是要新插入的内容

(1) insertBefore() & before() 方法 ：在被选元素前（元素外部）插入指定内容

$("<span>测试</span>").insertBefore("p"); 

<span>测试</span><p>hello</p> //结果

注：如果指定内容是已存在的元素，它将从它的当前位置被移除，并被插入在被选元素之前。

$("p").before("<span>测试</span>"); 

<span>测试</span><p>hello</p> //结果

(2) insertAfter() & after()方法：在被选元素后（元素外部）插入指定内容

 $("<span>测试</span>").insertAfter("p"); 

<p>hello</p><span>测试</span>  //结果

注：如果指定内容是已存在的元素，它将从它的当前位置被移除，并被插入在被选元素之后。

$("p").after("<span>测试</span>"); 

<p>hello</p><span>测试</span>  //结果