[解決済み】.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);
});

解決方法は？

ご覧ください。

.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() は要素の前に置く

の後に使用します。

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