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

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

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

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

在匹配元素集合中的每個元素后面插入參數所指定的內容，作為其兄弟節點。

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

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

After

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

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

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

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

語法 ：insertBefore(newchild,refchild)

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

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

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

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

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

insertAfter

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

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

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

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

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

依舊是執行after：

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

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

收集構建的節點：

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

構建一個新jQuery對象，以便實現鏈式：

this.pushStack( ret );

可見 after 與 insertAfter 本質其實都是一樣的，只是通過不同的方式調用。