現在開発中のWebシステムでjQueryでの要素追加メソッドを使うことがあったのですが、すぐに忘れてしまうのでまとめてみました。
ちなみに私は、.after()や.before()などは、名前の通りのメソッドなのでわかりやすいし覚えやすいのですが、.append()や.prepend()あたりを忘れやすいです。
.after()
$('div').after('追加要素');
一番わかりやすいし、使いやすいので、比較的利用頻度が高めなメソッドです。
指定した要素のすぐ後ろに、要素を追加します。
上のコードを実行するとこんな感じになります。
なお、今回掲載しているサンプルコードでは、div要素に対して、p要素を追加しています。
<div>基準となるdiv要素</div> <p>追加したp要素</p> <!-- after()で追加したp要素 -->
似たようなメソッドとして、.insertAfter()があります。
$('追加要素').insertAfter('div');
実行結果は、上で記載した.after()と同じになります。
追加したい要素と、追加の基準となる要素の順番が逆になるので、こちらは少し分かりにくい印象を受けます。
.before()
$('div').before('追加要素');
こちらは.after()と似ていますが、指定した要素のすぐ前に要素を追加するメソッドです。
分かりやすいですが、今まで書いたコードの中ではそこまで使用頻度は高くなかったです。
<p>追加したp要素</p> <!-- before()で追加したp要素 --> <div>基準となるdiv要素</div>
こちらのbeforeにも、似たようなメソッドとして、.insertBefore()があります。
$('追加要素').insertBefore('div');
こちらの実行結果は、上で記載した.before()と同じになります。
.append()
$('div').appand('追加要素');
こちらも良く使うメソッド。
指定した要素の中に、要素を追加します。
<div>
<b>元々記述してあったb要素</b>
<p>追加したp要素</p> <!-- append()で追加したp要素 -->
</div>
なお、要素を追加するときは、指定した要素内（今回はdiv要素）の一番後ろに要素が追加されます。
似たようなメソッドとしては、.appendTo()があります。
$('追加要素').appendTo('div');
実行結果は上で記載した.append()のサンプルと同じ結果になります。
.prepend()
$('div').before('追加要素');
こちらは.append()メソッドと似ていますが、指定した要素の中の一番前に要素が追加されます。
<div>
<p>追加したしたp要素</p> <!-- prepend()で追加したp要素 -->
<b>元々記述してあったb要素</b>
</div>
こちらは使用頻度は低め、というかまだ実際に使ったことはないですね。
こちらにも似たようなメソッドとして、.prependTo()があります。
$('追加要素').prependTo('div');
実行結果は上で記載した.prepend()のものと同じです。
ざっくりとまとめましたが、要素を追加するメソッドとしてはこのあたりを知っていればいいかと思います。
他にも.wrap()メソッドという、指定した要素で対象の要素を囲むメソッドもありますが、こちらは使う機会はあまりないかと思い、割愛させていただきました。
もし間違っている場合は、そっとご指摘をお願いします。
