jQueryで要素を追加するメソッド

append

親要素(div)の中の、子要素の最後に指定要素やテキストを追加します。

HTML
<div class="sample">
  <h1>あいさつ</h1>
  <p>こんにちは</p>
  <p>こんばんは</p>
</div>

jQuery
$('div').append('<p class="add">子要素pの後ろに追加</p>');

結果
<div class="sample">
  <h1>あいさつ</h1>
  <p>こんにちは</p>
  <p>こんばんは</p>
  <p class="add">子要素pの後ろに追加</p>
</div>

prepend

親要素(div)の中の、子要素の先頭に指定要素やテキストを追加します。

HTML
<div class="sample">
  <h1>あいさつ</h1>
  <p>こんにちは</p>
  <p>こんばんは</p>
</div>

jQuery
$('div').prepend('<p class="add">子要素pの先頭に追加</p>');

結果
<div class="sample">
  <p class="add">子要素pの先頭に追加</p>
  <h1>あいさつ</h1>
  <p>こんにちは</p>
  <p>こんばんは</p>
</div>

after

自要素(div)の後に指定要素やテキストを追加します。

HTML
<div class="sample">
  <h1>あいさつ</h1>
  <p>こんにちは</p>
  <p>こんばんは</p>
</div>

jQuery
$('div').after('<div class="add">div要素の下に追加</p>');

結果
<div class="sample">
  <h1>あいさつ</h1>
  <p>こんにちは</p>
  <p>こんばんは</p>
</div>
<div class="add">div要素の下に追加</p>

before

自要素(div)の前に指定要素やテキストを追加します。

HTML
<div class="sample">
  <h1>あいさつ</h1>
  <p>こんにちは</p>
  <p>こんばんは</p>
</div>

jQuery
$('div').before('<div class="add">div要素の上に追加</p>');

結果
<div class="add">div要素の上に追加</p>
<div class="sample">
  <h1>あいさつ</h1>
  <p>こんにちは</p>
  <p>こんばんは</p>
</div>

appendとprependは要素の内側に追加され、
beforeとafterは要素の外側に追加されます。