jquery中append，prepend，before和after方法的区别是什么？

pend：在元素内部的最后面添加元素,作为子元素，如：

通过jquery代码$("div").append("<p>我是通过append添加的</p>")，得到的结果是：

prepend：在元素内部的最前面添加元素,作为子元素，如：

通过jquery代码$("div").prepend("<p>我是通过prepend添加的</p>")，得到的结果是：

before:在元素的前边，作为兄弟元素添加,如：

通过jquery代码 $(".base").before("<div>我是在前边添加的兄弟节点</div>")，得到的结果是：

after:在元素的后边，作为兄弟元素添加,如：

通过jquery代码 $(".base").after("<div>我是在后边添加的兄弟节点</div>")，得到的结果是：

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

jQuery的模块可以分为：入口模块、底层支持模块和功能模块。

其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

实例代码：

<ul>

   <li>元素1</li>

   <li>元素2</li>

   <li>元素3</li>

</ul>

①append是插入到所选元素里面子元素的最后面。

如$("ul").append("<li>插入的元素4</li>")结构会变成：

<ul>

   <li>元素1</li>

   <li>元素2</li>

   <li>元素3</li>

   <li>插入的元素4</li>

</ul>

②prepend是插入到所选元素里面子元素的最前面。

如$("ul").prepend("<li>插入的元素4</li>")结构会变成：

<ul>

   <li>插入的元素4</li>

   <li>元素1</li>

   <li>元素2</li>

   <li>元素3</li>

</ul>

③after是插入到所选元素的最后面(紧挨着被选元素)。

如$("ul").after("<div>新盒子</div>")结构会变成：

<ul>

   <li>元素1</li>

   <li>元素2</li>

   <li>元素3</li>

</ul>

<div>新盒子</div>

④before是插入到所选元素的前面(紧挨着被选元素)。

如$("ul").before("<div>新盒子</div>")结构会变成：

<div>新盒子</div>

<ul>

   <li>元素1</li>

   <li>元素2</li>

   <li>元素3</li>

</ul>

---