不要再搞混了！！！！
接下来的例子以这个代码为基础
<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> //结果
