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>
関連の記事
jQuery 要素を追加するサンプル(before/after/prepend/append)
jQuery 要素を置き換える(replaceWith/replaceAll)