jQueryの（）メソッド除去DOM要素

Question

後のjQuery after()方法は、選択した要素の後にHTML要素を挿入するために使用されます。上記のコードは正常に動作し

$(".inner").after("<h2>Greetings</h2>"); 

：私のコードは

<h2>Greetings</h2> 
    <div class="inner">Hello</div> 
    <div class="inner">Goodbye</div> 
    </div> 

jQueryのコードです。 jQueryが2つのdivタグの後に<h2>Greetings</h2>コードを挿入しています。

<div class="container"> 
    <h2>Greetings</h2> 
    <div class="inner">Hello</div> 
    <h2>Greetings</h2> 
    <div class="inner">Goodbye</div> 
    <h2>Greetings</h2> 
</div> 

以下のようなHTML生成しかし、私は

$(".inner").after($('h2')); 

jQueryの最初のオリジナル<h2>Greetings</h2>タグを除去し、2つの後<h2>Greetings</h2>タグを挿入した後、以下のようなafter()メソッドへのパラメータとしてjQueryのセレクタ$('h2')を渡しますdivタグ。 HTMLは次のように生成されます。

<div class="container"> 
    <div class="inner">Hello</div> 
    <h2>Greetings</h2> 
    <div class="inner">Goodbye</div> 
    <h2>Greetings</h2> 
</div> 

Jquery DOMセレクタとプレーンHTMLタグを渡すときの違いは何ですか？あなたは文字列を使用する場合

$('h2') 

は、すべてのH2を選択しながら、

Answer 1

は、jQueryのは、

$("<h2>Greetings</h2>") 

が実際に新しいH2要素を作成しますので、渡されたHTMLの文字列に基づいてneccessary要素を作成しますドキュメント内の要素。 after()として

は

$.fn.after = function(arg) { 
    return this.each(function() { // loops over all .inner elements 

     var elem = $(arg); // "h2" selects all H2, "<h2>" creates H2 elements 
     this.parentNode.insertBefore(elem, this.nextSibling); // something like that, 
    });              // not really important ? 
} 

..itようなものは、いずれかの理由eachループから、$(".inner")で見つかったすべての一致する要素の新しいH2 （$("<h2>")）を作成し、またはそれはちょうど同じ要素を移動させます$('h2')から各.innerの後に、選択されたH2要素が最後の後に終了することを意味します。.inner

セレクタを使用するときは、彼は、ページ上にあるH2要素を既存の、そしてあなたが「H2」要素を選択しているあなたの例では$（「セレクタ」）あなたはDOM要素を参照しているが、使用する場合は、それらを

var h2 = $('h2'); // selects all H2 elements on the page 

$(".inner").after(h2); // moves those elements after .inner 

Answer 2

を移動します。

これを別の要素に追加したり、after（）を使用すると、要素自体を取り出して新しい場所に移動します。

選択した要素

var clonedH2 = $("h2").clone() 
$("selector").after(clonedH2)