DOM要素の説明の分析jQueryのソース（二十から三）モジュールの交換作業

で、このセクションでは、動作モジュールDOMは、現在の要素が指定されたDOM要素に取って代わることができると一致するモジュール内の要素を交換前記次のように、二つの方法があります。

replaceWith（値）は、要素のセットのそれぞれのマッチングを置き換えるために使用される新しいコンテンツを提供します。値は、新しいコンテンツが文字列のHTML、DOM要素、jQueryの新しいコンテンツオブジェクトまたは関数の戻りもありです。
でReplaceAll（値）;置換要素の要素のセットにおける整合素子。内部実行.replaceWith（value）メソッドが、異なる構文の順。APPENDと同様に（）とappendTo（）。

栗の場合：

砂漠のQQ：22969969によって作家

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スクリプトSRC = "http://libs.baidu.com/jquery/1.7 0.1 / jquery.min.js」> </ スクリプト> 
</ ヘッド> 
< 身体> 
    < div要素のid = "テスト" > < 私>のHello World！<
    ボタンID = "B1" >試験1 </ ボタン> 
    < ボタンID = "B2" >実験2 </ ボタン> 
    < スクリプト> 
        b1.onclick = 関数（）{       // replaceWithと#testの内容（）方法
            $（' #test ' ）.replaceWith（' <IDのH1 = "テスト"> jQueryのこんにちは！</ H1の> ' ）
        }       
        B2。onclickの= 関数（）{       // でReplaceAll（）メソッドと#testの内容
            $（' <P ID = "テスト"> jQueryの良いです！</ P> ' ）.replaceAll（' #test ' ）
        } 
    </ スクリプト> 
</ ボディ> 
</ HTML >

次のようにレンダリング：

[テスト]ボタン1をクリックすると、以下のように、ページのレンダリングは次のとおりです。

あなたがテスト2ボタンをクリックすると、以下のように、ページは次のようになります。

ソースコード解析

次のようにreplaceWith（実装）は、比較的簡単です。

jQuery.fn.extend（{ 
    replaceWith：関数（値）{                  // 新たなコンテンツのセットの各要素.VALUE整合素子を置き換え、それが文字列HTML、新たなコンテンツを備えたDOM要素、jQueryオブジェクトまたは復帰することができます機能新しいコンテンツ。
        IF（この [0] && この [0] .parentNode）{              // もし要素が親要素有する少なくとも1つの整合素子、
            // いることを確認し、彼らが前にDOMから削除される要素を挿入
            // 子要素でこの交換CAN修正Aの親ヘルプ
            IF（jQuery.isFunction（値））{              // 値が関数である場合に
                返す この .each（関数（I）{                     // 一致する要素の反復セットを
                    VAR自己= jQueryの（この）、旧= self.html（）; 
                    self.replaceWith（value.call（これ、I、旧））;      // すべての要素のための関数値、および機能の呼び出しの繰り返しの戻り値を呼び出しますreplaceWith（）関数。
                }）; 
            } 

            IF（typeof演算値== "ストリング"）{！                 // パラメータ値が文字列でない場合、それはDOM要素またはjQueryのオブジェクトであってもよい 
                値= jQueryの（値）.detach（）;                 // 値を作成しますjQueryオブジェクトは、その後、関連するデータおよびイベントを保持するために、パラメータ値が文書から削除された）（.detach呼び出します。
            } 

            を返し 、この .each（関数（）{                     // 反復電流整合素子を
                VAR次に= この .nextSibling、                     // 次の要素の参照ノード 
                    の親= この .parentNode;                     // ノード参照要素

                jQueryの（この）.remove（）;                         // コール.remove（）は、現在の要素と子孫要素を削除します関連するデータおよびイベントは、メモリリークを避けるために。

                IF（次）{                                     // の次の要素がある場合 
                    jQueryの（次）.before（値）;                     //は、次の兄弟の前に新しいコンテンツを挿入する$ .fn.before（）関数と呼ばれる; 
                } 他{     
                    jQueryの（親）.append（値）。                    // 新しいコンテンツの他のコール$ .fn.append（）関数は、親要素の最後に挿入されます。
                } 
            }）; 
        } 他{
             戻り 、この .LENGTHか？
                 この .pushStack（jQueryの（jQuery.isFunction（値）値（）：値？）、 "replaceWith" 、値）：
                 この; 
        } 
    } 
}）

、電流が除去される前に、追記前次いで、（前のノードを呼び出し）（削除を呼び出すために）、または新しいノードを挿入する親ノード（）メソッドは（でReplaceAllとすることができる）、そのインサート要素ことは比較的簡単ですします。https：//www.cnblogs.com/greatdesert/p/11732436.htmlいくつかの方法のように、それは、あなたがこのリンクで見ることができる）（replaceWithを表現する別の方法です

DOM要素の説明の分析jQueryのソース（二十から三）モジュールの交換作業

おすすめ