jQuery的各种插入方法

工作中经常会用遇到向DOM树中插入元素的问题，jQuery中有几个方法可以很好地解决问题，但是经常把他们的用法弄混淆，今天任务之余总结如下：
1、append（）也是最常用的一种方法 。
它的功能是： 向要插入的父元素的最后一个子节点后面依次插入元素
插入前的DOM树是这样的：

执行 $("ul").append("<li>444</li>") 后的结果是：

2、appendTo（）
它的功能是：插入‘到’摸个元素中 appendTo中的To可以理解为‘到’的意思
插入前的DOM树是这样的（父元素没有子元素）：

执行$("<p>aaaaa</p>").appendTo($("#bbb"))后结果是：

注：父元素有子元素时的情况刚好和append（）相同 如图：

3、before（）
它的功能是：在某元素‘的’前面插入
插入前的DOM树是这样的：

执行$("p").before("<p>hello</p>")（在p元素‘的’前面插入 ， 调用before（）方法时的‘.’可以理解为‘的’意思）后结果是：

4、after（）
它的功能和before（）相反 在用法上和before（）完全相同 这里就不在赘述。