ソーステキストおよびHTMLを操作する方法を分析するためのjQueryのDOMモジュール（XXV）

次のようにHTMLとテキストは、コンテンツ内のDOMノードにアクセスして変更することができます：

HTML（値）; innerHTMLのは、代わりのinnerHTML ,;値を設定し、コンテンツ・エレメント・マッチング要素を取得し、各元素の含有量を設定し、どのパラメータセットが整合素子を取得していない場合、関数リターンまたはHTMLコードのHTMLコードであってもよいです最初の要素でのinnerHTMLプロパティの内容
テキスト（テキスト）;すべての要素が組み合わされ、または各要素のテキストコンテンツは、カプセル化方法はcreateTextNodeを設定した後、テキスト整合要素の組を取得します

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

栗の場合：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スクリプトSRC = "http://libs.baidu.com/jquery/1.7 0.1 / jquery.min.js」> </ スクリプト> 
</ ヘッド> 
< 身体> 
    < divの>のHello World！</ DIV > 
    <</ ボタン> 
    < ボタンID = "B2" >按钮2 </ ボタン> 
    < スクリプト> 
        $（' ＃B1の' ）.click（（）=> {
            $（' 本部' ）.htmlを（' <P> jQueryのこんにちは！</ P> ' ）              // 使用HTML（）の設定値
        }）
        $（' ＃b2の' ）.click（（）=> {
            $（' 本部' ）の.text（' <P> jQueryのこんにちは！</ P> ' ）              // テキスト（）の値を設定することができ
        }）
     </ スクリプト> 
</ ボディ> 
</ HTML >

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

次のようにレンダリングされたHTML（）の設定値を使用して、1をクリックしてください：

この場合、以下のようにレンダリングする、（）値セットテキストを使用します2をクリックしてください：

前者はであるinnerHTMLプロパティを設定することによって達成されるので、我々は）（HTMLのために見ることができ、ラベルをつけているの意味が解析され、テキスト（）のために、それは単に表示され、それがあります達成するために作成さはcreateTextNodeテキストノード

ソースコード解析

htmlのためには、次のように実装され、innerHTMLプロパティによって達成されます。

jQuery.fn.extend（{
    HTML：関数（値）{                 // 整合要素の組は、各要素またはHTMLコンテンツのセットの最初の要素のHTMLコンテンツを取得します。設定を読み込むことでinnerHTMLプロパティを実現しました。あるいは値、またはHTMLコードのHTMLコードを返す関数とすることができます。
        IF（===不定値）{                             // 引数が渡されない場合、HTMLコンテンツ・マッチングの最初の要素は読み出し
            戻り 、この [0] && この [0]。1 .nodeType ===？             // 場合は、この[ 0]が存在し、ノード要素であり
                、この（ ""、rinlinejQuery）[0] .innerHTML.replace：          // innerHTMLプロパティの読み取り
                ヌル。

        // 見れば私たちはAのショートカットを取り、innerHTMLプロパティを使用することができます 
        } 他の IF（typeof演算値===「文字列」&&！RnoInnerhtml.test（値）&&                 // コードやスクリプトスタイルのタグが含まれていないHTMLコード。 
            （jQueryのを|| .support.leadingWhitespace！rleadingWhitespace.test（値））&&         // ブラウザが先行ブランクの負を無視する、または空白文字で始まっていないhtmlコードはありません。 
            ！wrapMap [（rtagName.exec（値）|| [ "" 、 ""]）[1] .toLowerCase（）]）{             // タグラベルは、親htmlコードをラップする必要はありません正しくシリアライズすることができます

            値 = value.replace（rxhtmlTag、「<$ 1> </ $ 2> 「）;                                     // 補正自閉症ラベル

            トライ{
                 ため（VARは、 I = 0、Lが= この .LENGTHと、I <L、I ++）{                             // 反復この整合素子は
                    // 削除要素ノードおよび防止メモリリーク
                    IF（この [I] === .nodeType 1） {                                                 // ノードがノード要素である場合 
                        jQuery.cleanData（この [I] .getElementsByTagName（「*」））;                         // 最初の削除イベント・データと関連する要素のすべての子孫     
                        この [I] .innerHTML =値;                                                     / / への試みinnerHTMLの挿入HTMLコンテンツを直接属性。
                    }
                }

            // のinnerHTMLを使用する例外AN、使用方法フォールバックスロー 
            } キャッチ（E）{
                 この .empty（）アペンド（値）;.                                                 // のRAN異常innerHTMLプロパティを設定する場合ならば、最初のコールが（空の）除去子孫要素に関連するデータおよびイベントは、子要素を削除し、新しいコンテンツを挿入するために）（.appendを呼び出します。
            }

        } 他 IF（jQuery.isFunction（値））{                 // 値が関数である場合には、マッチした要素の集合が横断する、関数は各要素に対して行われ、新しいHTMLコンテンツとして戻り値をとり、反復呼び出しの.html（vlueれます）。
            この .each（関数（I）{
                 VARの自己= jQueryの（この）。

                self.html（value.call（これ、I、self.html（）））;
            }）;

        } 他{
             この.empty（）アペンド（値）。
        }

        戻る この ;                                             // 最後にこれを返し、操作がチェーンをサポートするために
    }、
}）

テキストの場合、それは次のように作成したテキストノードはcreateTextNodeによって実現されます。

jQuery.fn.extend（{
    テキスト：関数（テキスト）{                 // 合わせすべての要素のコレクション、または各要素のテキスト内容は、CreateText（）と追記（）外出先ノードテキストの作成時に設定する方法が提供された後、テキストマッチング要素を取得します。
        IF（jQuery.isFunction（テキスト））{         // テキストが関数の場合、関数は、マッチした要素のそれぞれについて行われ、新たなテキストとして戻り値を取っている、の.text反復（テキスト）メソッドを呼び出します。
            戻り この .each（関数（I）{
                 VARの自己= jQueryの（この）。

                self.text（text.call（本、I、self.text（）））;     // 2つのパラメータを渡す機能、現在の要素のこの実行が設けられているキーワード、呼び出し：セット位置における現在の要素のインデックスを現在の要素のコンテンツの古いテキスト。
            }）;
        }

        IF（typeof演算テキスト！==「オブジェクト」&&テキスト！==未定義）{     // テキストパラメータがオブジェクトではなく、また、文字列、数値またはブール値とすることができる、定義されていない場合。
            返さ この。.empty（）アペンド（（この [0] && この [0] ||文献.ownerDocument）.createTextNode（テキスト））;     // コンテンツを空し、テキストノードを作成するために、各整合素子に挿入
        }

        リターン jQuery.text（この）;                 // 着信パラメータまたは無効なパラメータテキスト（オブジェクト）、jQuery.text（ELEM）を呼び出し、すべてのマッチした要素がマージ後のテキストコンテンツ（シズルセレクタ）を取得しない場合。
    }、
}）

比較的単純

ソーステキストおよびHTMLを操作する方法を分析するためのjQueryのDOMモジュール（XXV）

おすすめ