jQuery-prepend、append、before、after的区别

举例说明，原始html代码如下：

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

1、prepend（在被选元素的开头插入元素）

$("ol").prepend("<li>Prepend item</li>");

得到：

<ol>
<li>Prepend item</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

2、append（在被选元素的结尾插入元素）

$("ol").append("<li>Append item</li>");

得到：

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>Append item</li>
</ol>

3、before（在被选元素之前插入内容）

$("ol").before("<b>Before</b>");

得到：

<b>Before</b>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

4、after（在被选元素之后插入内容）

$("ol").after("<i>After</i>");

得到：

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<i>After</i>