jQuery 要素を移動/子要素の先頭最後(appendTo)

jQueryの要素を移動するサンプルです。カットアンドコピーのイメージです。

目次	子要素の最後に移動する(appendTo)
	子要素の先頭に移動する(prependTo)
	要素の後ろに移動する(insertAfter)
	要素の前に移動する(insertBefore)

子要素の最後に移動する(appendTo)

$(移動する対象).appendTo(移動先)

$("#p1").appendTo("#div2");とした場合、<div id="div2">の子要素の最後に移動します。

上記サンプルのコードです。

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

子要素の先頭に移動する(prependTo)

$(移動する対象).prependTo(移動先)

$("#p3").prependTo("#div4");とした場合、<div id="div4">の子要素の先頭に移動します。

上記サンプルのコードです。

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

要素の後ろに移動する(insertAfter)

$(移動する対象).insertAfter(移動先)

$("#p5").insertAfter("#div6");とした場合、<div id="div6">の後ろに移動します。

上記サンプルのコードです。

<div id="div5">
  <p>123</p>
  <p id="p5">あいうえお</p>
</div>
<div id="div6">
  <p>456</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#p5").insertAfter("#div6");
</script>

要素の前に移動する(insertBefore)

$(移動する対象).insertBefore(移動先)

$("#p7").insertBefore("#div8");とした場合、<div id="div8">の前に移動します。

上記サンプルのコードです。

<div id="div7">
  <p>123</p>
  <p id="p7">あいうえお</p>
</div>
<div id="div8">
  <p>456</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#p7").insertBefore("#div8");
</script>