jquery的dom操作方法中，包括了after與insertAfter，這兩個方法名字相近，所實現的功能從名字中不容易分辨，所以在經過試驗後撰文一篇以加深記憶。
測試代碼如下：
<html>
<head>
<meta charset=”utf-8″>
<title>測試insertAfter與after的區別</title>
</head>
<body>
<ul>
<li class=”first”>first</li>
<li class=”middle”>middle</li>
<li class=”last”>last</li>
</ul>
</body>
</html>
自然狀態下顯示是這樣的：
添加腳本：$(‘.first’).insertAfter($(‘.last’));
則會把first移到last後面去，變成了這樣：
如果把insertAfter方法換爲after，效果則爲：
從上述對比可以看出，其實這兩個方法的差別就像主語跟賓語的差別一樣，是主與從的問題。
after方法，是把參數元素移到調用方法的元素的後面，而insertAfter方法則恰恰相反，是把調用方法的元素插入到參數元素的後面。
另外要注意的是，當要用這兩個方法在dom樹中添加新元素時,如”<li>new</li>”，這樣的html字符串不能出現在after方法的調用主體或insertAfter的參數中，因爲這樣一來，jquery不知道要把新元素放到哪裏去，反而會導致要相關的原有元素丟失。
引自：黑天鵝工作室