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

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

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

依賴(lài)的domManip，buildFragment模塊在之前就分析過(guò)了。

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

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

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

After

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

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

DOM操作并未提供一個(gè)直接可以在當(dāng)前節(jié)點(diǎn)后插入一個(gè)兄弟節(jié)點(diǎn)的方法，但是提供了一個(gè)類(lèi)似的方法。

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

語(yǔ)法 ：insertBefore(newchild,refchild)

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

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

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

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

用原生方法簡(jiǎn)單模擬：右側(cè)代碼編輯器所示。

insertAfter

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

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

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

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

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

依舊是執(zhí)行after：

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

最終還需要返回這個(gè)構(gòu)建的新節(jié)點(diǎn)。

收集構(gòu)建的節(jié)點(diǎn)：

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

構(gòu)建一個(gè)新jQuery對(duì)象，以便實(shí)現(xiàn)鏈?zhǔn)剑?/p>

this.pushStack( ret );

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