jQuery学習のDOMノードの挿入方法のまとめ

4912 ワード
jquery dom ノード
ここでは、jQueryのDOMノードの挿入方法と、様々な方法の注意点をまとめました。
一、内部にapped()とappndTo()を挿入する
  • apped：この動作は、指定された要素に対して元のapendChild方法を実行し、ドキュメントに追加する場合と同様である。
  • appndTo：実際には、この方法を使用すると、従来の$(A).append(B)の動作を逆さまにしています。つまり、BをAに追加するのではなく、AをBに追加します。
    • append()とappendTo()の2つの方法は同じで、主な違いは文法である。内容と目標の位置が違っていて、append()の前は選択対象であり、後は対象内に挿入する要素コンテンツであり、appendTo()の前は挿入する要素コンテンツであり、後は選択対象である。
    
 　　$("#bt1").on('click', function() {
 //.append(),            ，
 //          。
 $(".content").append('<div class="append">  append       </div>')
 })

 $("#bt2").on('click', function() {
 //.appendTo()    ，       ，
 //                       
 //              。
 $('<div class="appendTo">  appendTo       </div>').appendTo($(".content"))
 })
    二、内部挿入prepend()とprependTo()
    要素内部で動作する方法は、選択された要素の最後（依然として内部）に指定された内容をappedとappndToを介して挿入する以外に、対応するものは、選択された要素の前に挿入することができ、jQueryが提供する方法はprependとprependToである。
  • .prepend()方法は、指定された要素をマッチング要素のうちの最初のサブ要素として挿入する（最後のサブ要素として挿入するなら.append()).
    • ）。
  • .prepend()と.prependTo()は同じ機能を実現しています。主な違いは文法です。挿入された内容と目標の位置が違います。
  • は、.prepend() に対して、選択式を方法の前に書き込み、挿入するコンテンツのコンテナとして挿入するコンテンツを方法のパラメータ
    • とする。
  • は、.prependTo() とは正反対であり、挿入されるコンテンツを方法の前に書いて、選択式または動的に作成されたマークとすることができ、挿入されるコンテンツのコンテナをパラメータとして用いる。
    • 
$("#bt1").on('click', function() {
 //  class="aaron1" div  ,    prepend             p  
 $('.aaron1').prepend('<p>prepend   p  </p>')
 })
 $("#bt2").on('click', function() {
 //  class="aaron2" div  ,    prependTo            p  
 $('<p>prependTo   p  </p>').prependTo($('.aaron2'))
 })
    ここでは内部操作の四つの方法の違いをまとめます。
  • append()は、各マッチング要素の内部にコンテンツを追加する
    • 。
  • prepend()は、各マッチング要素の内部プリアンブル
    • を含む。
  • appendTo()は、一致するすべての要素を他の指定要素のセットに追加する
    • 。
  • prependTo()は、一致するすべての要素を他の指定された要素セットに前置きする。
    • 三、外部挿入after()とbefore()
    ノードとノードの前には様々な関係があります。親子、先祖関係だけでなく、兄弟関係もあります。前に私たちは処理ノードを挿入する時に、内部挿入のいくつかの方法に接触しました。この節は外部挿入の処理、つまり兄弟間の関係処理について話し始めました。ここでjQueryは2つの方法を導入して、Iに合う元素の前後に内容を挿入するために使用できます。
  • beforeとafterは、比較的選択された要素の外部に隣接する兄弟ノード
    • を追加するために使用される。
  • の方法は、すべてHTML文字列、DOM要素、要素配列、またはjQueryオブジェクトを受信して、セット内の各マッチング要素の前または後ろの
    • に挿入することができる。
  • の方法は、複数のパラメータ転送after（div 1，div 2，...）をサポートしています。右の判例コード
    • を参照してもいいです。
    注意点：
    afterは元素の後にhtmlコードを追加して、もし元素の後に元素があるならば、それでは後の元素を後に移して、それからhtmlコードを挿入して、beforeは元素の前にhtmlコードを添加して、もし元素の前に元素があるならば、それでは前の元素を前に動かして、それからhtmlをコードに代わって挿し込みます。
    
$("#bt1").on('click', function() {
 //   test1              p  
 $(".test1").before('<p style="color:red">before,         </p>', '<p style="color:red">   </p>')
 })
$("#bt2").on('click', function() {
 //   test1              p  
 $(".test2").after('<p style="color:blue">after,         </p>', '<p style="color:blue">   </p>')
})
    四、外部挿入insertAfter（）とinsertBefore（）
    内部挿入処理と同様に、jQueryはコンテンツターゲットの位置によって2つの新しい方法を追加しました。
  • .before()および.insertBefore()は、同じ機能を実現する。主な違いは文法です。内容と目標の位置です。before()に対して、表現が関数の前で選択され、内容がパラメータとして提供され、.insertBefore()とは正反対である。コンテンツは、方法の前で、パラメータ内の要素の前に置かれる
    • 。
  • .after()および.insertAfter() は、同じ機能を実現する。主な違いは文法です。特に内容と目標の位置です。after()選択式は関数の前にあります。パラメータは挿入する内容です。.insertAfter()に対しては、ちょうど反対に、コンテンツは、方法の前にあり、パラメータ内の要素の後に配置される
    • 。
  • before、afterとinsertBefore。insertAfterはターゲットと位置の違い以外に、後のマルチパラメータ処理がサポートされていません。
    • 注意事項：
  • insertAfterはJQueryパッケージされた要素を指定された要素の後ろに挿入します。もし要素の後ろに要素があれば、後の要素を後に移動して、JQueryオブジェクトを挿入します。
  • insertBeforeはJQueryパッケージされた要素を指定された要素の前に挿入します。もし要素の前に要素があれば、前の要素を前に移動して、JQueryオブジェクトを挿入します。
    • 
$("#bt1").on('click', function() {
 // test1                ,      
 $('<p style="color:red">  insertBefore    </p>', '<p style="color:red">   </p>').insertBefore($(".test1"))
})

$("#bt2").on('click', function() {
 // test2                ,      
 $('<p style="color:red">  insertAfter    </p>', '<p style="color:red">   </p>').insertAfter($(".test2"))
})
    締め括りをつける
    以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてほしいです。もし疑問があれば、メッセージを残して交流してもいいです。
    Vue.js学習の計算属性
    C++sizeof実例解析