jQuery針對DOM操作的插入的方法有大概10種：

append、prepend、before、after、replaceWith
appendTo、prependTo、insertBefore、insertAfter、replaceAll

分2組，上下對照，實現(xiàn)同樣的功能。主要的不同是語法——特別是內(nèi)容和目標的位置。

依賴的domManip，buildFragment模塊在之前就分析過了。

在匹配元素集合中的每個元素后面插入?yún)?shù)所指定的內(nèi)容，作為其兄弟節(jié)點。

對于 .after()， 選擇表達式在函數(shù)的前面，參數(shù)是將要插入的內(nèi)容。

對于 .insertAfter()，剛好相反，內(nèi)容在方法前面，它將被放在參數(shù)里元素的后。

After

after: function() {
    return this.domManip( arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this.nextSibling );
        }
    });
},

之前提過了所有的方法靠this.domManip合并參數(shù)處理，內(nèi)部通過buildFragment模塊構建文檔碎片，然后把每一個方法的具體執(zhí)行通過回調(diào)的方式提供出來處理。

DOM操作并未提供一個直接可以在當前節(jié)點后插入一個兄弟節(jié)點的方法，但是提供了一個類似的方法。

insertBefore() 方法：可在已有的子節(jié)點前插入一個新的子節(jié)點。

語法 ：insertBefore(newchild,refchild)

看看jQuery如何處理的，例如：

inner.after('<p>Test</p>');

內(nèi)部就會把  '<p>Test</p>' 通過buildFragment構建出文檔elem，然后通過 this.parentNode.insertBefore( elem, this.nextSibling );

這里的this 就是對應著inner ，elem就是‘<p>Test</p>’，看到這里就很好理解after的實現(xiàn)了。

用原生方法簡單模擬：右側代碼編輯器所示。

insertAfter

$('<p>Test</p>').insertAfter('.inner');

通過$('<p>Test</p>')構建一個文檔，對象通過insertAfter方法插入到所有class等于inner的節(jié)點后。表達的意思與after是一樣的，主要的不同是語法——特別是內(nèi)容和目標的位置。

看具體的實現(xiàn)方法中insertAfter('.inner');inner其實就被當作selector傳入進來了，selector可能只是字符串選擇器內(nèi)部就需要轉化，insert = jQuery( selector ),

$('<p>Test</p>')就是構建出來的文檔碎片節(jié)點，那么如果賦給insert有多個的時候就需要完全克隆一份副本了，所以就直接賦給：

elems = i === last ? this : this.clone( true );
jQuery( insert[ i ] )[ original ]( elems );

依舊是執(zhí)行after：

jQuery( insert[ i ] )[ original ]( elems );

最終還需要返回這個構建的新節(jié)點。

收集構建的節(jié)點：

core_push.apply( ret, elems.get() );

構建一個新jQuery對象，以便實現(xiàn)鏈式：

this.pushStack( ret );

可見 after 與 insertAfter 本質(zhì)其實都是一樣的，只是通過不同的方式調(diào)用。