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

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

hello

1.append的用法

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

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

helloworld
  //结果

2.prepend的用法

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

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

worldhello
    //结果

3.after的用法

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

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

hello
world//结果

4.before的用法

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

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

world
hello
//结果

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

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

(1) append()方法：

$("p").append("测试");  

hello测试
 //结果

(2) appendTo()方法：

$("测试").appendTo("p");   

hello测试
 //结果

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

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

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

$("测试").insertBefore("p"); 

测试
hello
 //结果

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

$("p").before("测试"); 

测试
hello
 //结果

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

 $("测试").insertAfter("p"); 

hello
测试  //结果

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

$("p").after("测试"); 

hello
测试  //结果