.append（）、prepend（）、. after（）および.before（）

私はコーディングにかなり熟練していますが、時々、基本的に同じことをしているように見えるコードに出くわします。ここで私の主な質問は、なぜあなたはその.append()代わりに、.after()またはその逆の詩を使うのですか？

私は探していましたが、2つの違い、いつ使用するか、いつ使用しないかの違いを明確に定義できていないようです。

どちらが他のものより優れているか、またなぜもう1つではなく1つを使用するのですか？誰かがこれを私に説明してくれませんか？

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});

見る：

.append()last indexandの要素内にデータを置きます
.prepend()配置し、先頭にelemを配置しますfirst index

と仮定します：

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

とき.append()実行し、それは次のようになります。

$('.a').append($('.c'));

実行後：

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

実行中に.append（）をいじります。

とき.prepend()実行し、それは次のようになります。

$('.a').prepend($('.c'));

実行後：

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

実行中に.prepend（）をいじります。

.after() 要素の後に要素を置きます
.before()置きます要素の前に置きます

使用後：

$('.a').after($('.c'));

実行後：

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

実行中の.after（）をいじります。

前に使用：

$('.a').before($('.c'));

実行後：

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

実行前に.before（）をいじります。

この画像は、以下に表示された明確な理解を与えるとの間の正確な差を示し.append()、.prepend()、.after()及び.before()

あなたはそのイメージから見ることができる.append()と.prepend()、新しい要素を追加し、子要素（茶色に着色）ターゲットに。

そして、.after()そして.before()、新しい要素を追加する兄弟要素（黒色）をターゲットに。

これは、理解を深めるためのデモです。

編集：それらの関数の反転バージョン：

このコードを使用する：

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

このターゲットで：

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

したがって、これらの関数はパラメーターの順序を入れ替えますが、それぞれが同じ要素のネストを作成します。

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

...しかし、それらは異なる要素を返します。これはメソッドの連鎖にとって重要です。

append()＆prepend()ながら、要素内のコンテンツを挿入する（コンテンツ子を作る）されているafter()＆before()素子外部コンテンツインサート（コンテンツその兄弟を作ります）。

最良の方法はドキュメントに行くことです。

.append() 対 .after()

• 。append()：パラメータで指定されたコンテンツを、一致する要素のセットの各要素の末尾に挿入します。
• 。after()：一致する要素のセットの各要素の後に、パラメーターで指定されたコンテンツを挿入します。

.prepend() 対 .before()

• prepend()：パラメータで指定されたコンテンツを、一致する要素のセットの各要素の先頭に挿入します。
• 。before()：一致する要素のセットの各要素の前に、パラメーターで指定されたコンテンツを挿入します。

したがって、appendとprependはオブジェクトの子を指し、afterとbeforeはオブジェクトの兄弟を指します。

.append()and .after()と.prepend()andの間には基本的な違いがあります.before()ます。

.append()は、selector要素のタグ内の最後.after()にparameter要素を追加しますが、では、要素のtagの後に parameter要素を追加します。

その逆にするためのものである.prepend()と.before()。

フィドル

それらのそれぞれのための余分な利点はありません。それは完全にあなたのシナリオに依存します。以下のコードはそれらの違いを示しています。

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here

<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>    

DOMを想像してください（HTMLページ）がツリーの右側にあるとください。HTML要素は、このツリーのノードです。

append()新しいノードを追加しchild、あなたがそれを上と呼ばれるノードの。

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

after()兄弟としてまたはあなたはそれを呼ばれるノードの親に同じレベルまたは子に新しいノードを追加します。

あなたのメインを試して答えるために質問：

なぜ.after（）ではなく.append（）を使用するのはですか？

jqueryを使用してDOMを操作する場合、使用するメソッドは必要な結果に依存し、頻繁に使用されるのはコンテンツを置き換えることです。

コンテンツを置き換えるには、あなたはしたい.remove()コンテンツと新しいコンテンツと交換してください。あなたの場合は.remove()、既存のタグと、その後は、使用しようと.append()、タグ自体が削除されているので、あなたが使用している場合のに対して、それは動作しません.after()、新しいコンテンツが「外」（今取り出し）タグと前回に影響されない追加されます.remove()。