web-dev-qa-db-ja.com

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

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

私はこれまで見てきましたが、両者の違いと使用するときとしないときの違いの明確な定義を見つけることができないようです。

他のものよりも一つの利点は何ですか、またなぜ私は他のものではなくどちらかを使用するのだろうか？誰かが私にこれを説明してもらえますか？

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);
});
javascriptjqueryappendprependjquery-after
187
Epik

見る：

.append()はlast indexの要素内にデータを置きます。
.prepend()は、先頭の要素を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()は要素を要素の前に置きます

afterを使う：

$('.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（）をいじる

410
Jai

以下に表示されているこの画像は明確な理解を与え、.append()、.prepend()、.after()および.before()の間の正確な違いを示しています

jQuery infographic

画像から、.append()と.prepend()は新しい要素を子要素（茶色）としてターゲットに追加することがわかります。

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

理解を深めるために、DEMOとします。

編集：これらの機能の反転バージョン：

jQuery insertion infographic, plus flipped versions of the functions

このコードを を使って ：

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>'))

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

124
VSri58

append()とprepend()は要素内にコンテンツを挿入する（コンテンツを子にする）ためのもので、after()とbefore()は要素の外にコンテンツを挿入する（コンテンツを兄弟にする）ためのものです。

36
alijsh

最善の方法は文書化することです。

.append() vs .after()

  • 。 append() ：一致した要素の集合の各要素のパラメーター最後までで指定された内容を挿入します。
  • 。 after() ：一致する要素の集合の各要素afterで指定された内容を挿入します。

.prepend() vs .before()

  • prepend() ：一致した要素の集合の各要素のパラメーター先頭へで指定された内容を挿入します。
  • 。 before() ：一致した要素の集合の各要素beforeで指定された内容を挿入します。

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

18
Ionică Bizău

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

.append()はパラメータ要素最後のセレクタ要素のタグ内を追加しますが、.after()はパラメータ要素要素のタグの後を追加します。

その逆は.prepend()と.before()です。

フィドル

9
I_Debug_Everything

それぞれに特別な利点はありません。それはあなたのシナリオ次第です。以下のコードはそれらの違いを示しています。

    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
5
Code.Town
<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>
5
Nate

DOM（HTMLページ）をツリーのように想像してみてください。 HTML要素はこのツリーのノードです。

append()は、それを呼び出したノードのchildに新しいノードを追加します。

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

creates a child node <p> to <div>

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

3
anu

メインの質問に答えてみましょう。

なぜでは、.after（）やその逆ではなく.append（）を使用するのですか。

あなたがjqueryでDOMを操作しているとき、あなたが使うメソッドはあなたが望む結果に依存します、そして、頻繁な使用は内容を置き換えることです。

コンテンツを置き換える際には、コンテンツを.remove()して新しいコンテンツに置き換える必要があります。既存のタグを.remove()してから.append()を使おうとすると、タグ自体が削除されているので機能しません。一方、.after()を使用している場合、新しいコンテンツは（現在削除された）タグの「外側」に追加され影響を受けません。前の.remove()によって。

3
Michael Durrant