jQuery 要素を追加/子要素の先頭最後(append)

jQueryの要素を追加するサンプルです。

目次 指定の要素の前に追加する(before)
  指定の要素の後に追加する(after)
  指定の要素の子要素の先頭に追加する(prepend)
  指定の要素の子要素の最後に追加する(append)

指定の要素の前に追加する(before)

$(追加先).before(追加する要素)

$("#div1").before('<p ~</p>');とした場合、divの前にp要素が追加されます。

<div id="div1">
  <p id="p1">あいうえお</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#div1").before('<p id = "a1">before</p>');
</script>

beforeメソッドでdiv要素の前にP要素を追加しています。

 

指定の要素の後に追加する(after)

$(追加先).after(追加する要素)

$("#div1").after('<p ~</p>');とした場合、divの後にp要素が追加されます。

<div id="div2">
  <p id="p2">あいうえお</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#div2").after('<p id = "a2">after</p>');
</script>

afterメソッドでdiv要素の後にP要素を追加しています。

 

指定の要素の子要素の先頭に追加する(prepend)

$(追加先).prepend(追加する要素)

$("#div1").prepend('<p ~</p>');とした場合、divの子要素の先頭にP要素を追加します。

<div id="div3">
  <p id="p3">あいうえお</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#div3").prepend('<p id = "a3">prepend</p>');
</script>

prependメソッドでdiv要素の子要素の先頭にP要素を追加しています。

 

指定の要素の子要素の最後に追加する(append)

$(追加先).append(追加する要素)

$("#div1").prepend('<p ~</p>');とした場合、divの子要素の最後にP要素を追加します。

<div id="div4">
  <p id="p4">あいうえお</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#div4").append('<p id = "a4">append</p>');
</script>

appendメソッドでdiv要素の子要素の最後にP要素を追加しています。

関連の記事

jQuery 要素を置き換える(replaceWith/replaceAll)
jQuery 要素を移動/子要素の先頭最後(appendTo)
jQuery 要素を削除するremoveとemptyの違い

△上に戻る