225

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

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

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

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);
});
4

9 に答える 9

483

見る：

.append()at 要素内にデータを配置し、先頭last indexに
.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() をいじってください。

于 2013-02-13T04:58:43.883 に答える
142

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

jQuery インフォグラフィック

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

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

理解を深めるためのDEMOを次に示します。

編集:これらの関数の反転バージョン:

jQuery 挿入のインフォグラフィックと反転バージョンの関数

このコードを使用：

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

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

于 2014-12-21T12:57:59.970 に答える
38

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

于 2013-02-13T04:54:44.363 に答える
20

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

.append()対.after()

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

.prepend()対.before()

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

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

于 2013-02-13T04:59:19.917 に答える
12

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

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

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

フィドル

于 2013-02-13T05:02:56.460 に答える
6

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

    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
于 2013-02-13T05:20:21.397 に答える