jQuery 要素を移動する(appendTo/prependTo/insertAfter/insertBefore)

nas

jQueryの要素を移動するサンプルです。
appendTo、prependTo、insertAfter、insertBeforeメソッドを使用します。

目次

子要素の最後に移動する(appendToメソッド)

子要素の最後に移動するサンプルです。
ボタン１を押すと、「あいうえお」の文字が「456」の下に移動します。
ボタン２を押すと、「あいうえお」の文字が「123」の下に移動します。

枠線のdiv要素が親でp要素の文字が子要素になっています。

123

あいうえお

456

コード

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

<style>
#div1{border: 1px solid #000;margin-bottom:5px;}
#div2{border: 1px dotted #000;margin-bottom:5px;}
</style>

<div id="div1">
	<p>123</p>
	<p id="p1">あいうえお</p>
</div>
<div id="div2">
	<p>456</p>
</div>
<input type="button" id="button1" value="ボタン1">
<input type="button" id="button2" value="ボタン2">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		$("#p1").appendTo("#div2");
	});

	$("#button2").click(function() {
		$("#p1").appendTo("#div1");
	});
});
</script>

21行目は、appendToメソッドで8行目のp要素を10行目のdiv要素の子要素の最後に移動します。
25行目は、appendToメソッドで11行目のP要素(456)の下に移動したp要素を6行目のdiv要素の子要素の最後に移動します。

以下は、ボタン1を押したときの図です。

appendToメソッド

  • jQueryのappendToメソッドです。
  • 要素を指定の要素の子要素の最後に移動します。
  • $(移動する対象).appendTo(移動先)
  • 以下はjQueryサイトのappendToメソッドのページです。
    http://api.jquery.com/appendTo/

子要素の先頭に移動する(prependToメソッド)

子要素の先頭に移動するサンプルです。
ボタン３を押すと、「あいうえお」の文字が「456」の上に移動します。
ボタン４を押すと、「あいうえお」の文字が「123」の上に移動します。

枠線のdiv要素が親でp要素の文字が子要素になっています。

123

あいうえお

456

コード

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

<style>
#div3{border: 1px solid #000;margin-bottom:5px;}
#div4{border: 1px dotted #000;margin-bottom:5px;}
</style>

<div id="div3">
	<p>123</p>
	<p id="p3">あいうえお</p>
</div>
<div id="div4">
	<p>456</p>
</div>
<input type="button" id="button3" value="ボタン3">
<input type="button" id="button4" value="ボタン4">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button3").click(function() {
		$("#p3").prependTo("#div4");
	});

	$("#button4").click(function() {
		$("#p3").prependTo("#div3");
	});
});
</script>

21行目は、prependToメソッドで8行目のp要素を10行目のdiv要素の子要素の先頭に移動します。
25行目は、prependToメソッドで11行目P要素(456)の上に移動したp要素を6行目のdiv要素の子要素の先頭に移動します。

以下は、ボタン3を押したときの図です。

prependToメソッド

  • jQueryのprependToメソッドです。
  • 要素を指定の要素の子要素の先頭に移動します。
  • $(移動する対象).prependTo(移動先)
  • 以下はjQueryサイトのprependToメソッドのページです。
    http://api.jquery.com/prependTo/

 

要素の後ろに移動する(insertAfterメソッド)

insertAfterメソッドで要素の後ろに移動するサンプルです。
ボタン５を押すと、「あいうえお」の文字が下の四角の下に移動します。
ボタン６を押すと、「あいうえお」の文字が上の四角の下に移動します。

枠線のdiv要素が親でp要素の文字が子要素になっています。

123

あいうえお

456

コード

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

<style>
#div5{border: 1px solid #000;margin-bottom:5px;}
#div6{border: 1px dotted #000;margin-bottom:5px;}
</style>

<div id="div5">
	<p>123</p>
	<p id="p5">あいうえお</p>
</div>
<div id="div6">
	<p>456</p>
</div>
<input type="button" id="button5" value="ボタン5">
<input type="button" id="button6" value="ボタン6">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button5").click(function() {
		$("#p5").insertAfter("#div6");
	});

	$("#button6").click(function() {
		$("#p5").insertAfter("#div5");
	});
});
</script>

21行目は、insertAfterメソッドで8行目のp要素を10-12行目のdiv要素の後ろに移動します。
25行目は、insertAfterメソッドで10-12行目のdiv要素の後ろに移動したp要素を6-9行目のdiv要素の後ろに移動します。

以下は、ボタン5を押したときの図です。

insertAfterメソッド

  • jQueryのinsertAfterメソッドです。
  • 要素を指定の要素の後ろに移動します。
  • $(移動する対象).insertAfter(移動先)
  • 以下はjQueryサイトのinsertAfterメソッドのページです。
    http://api.jquery.com/insertAfter/

 

要素の前に移動する(insertBeforeメソッド)

insertBeforeメソッドで要素の前に移動するサンプルです。
ボタン7を押すと、「あいうえお」の文字が下の四角の上に移動します。
ボタン8を押すと、「あいうえお」の文字が上の四角の上に移動します。

枠線のdiv要素が親でp要素の文字が子要素になっています。

123

あいうえお

456

コード

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

<style>
#div7{border: 1px solid #000;margin-bottom:5px;}
#div8{border: 1px dotted #000;margin-bottom:5px;}
</style>

<div id="div7">
	<p>123</p>
	<p id="p7">あいうえお</p>
</div>
<div id="div8">
	<p>456</p>
</div>
<input type="button" id="button7" value="ボタン7">
<input type="button" id="button8" value="ボタン8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button7").click(function() {
		$("#p7").insertBefore("#div8");
	});

	$("#button8").click(function() {
		$("#p7").insertBefore("#div7");
	});
});
</script>

21行目は、insertBeforeメソッドで8行目のp要素を10-12行目のdiv要素の前に移動します。
25行目は、insertBeforeメソッドで10-12行目のdiv要素の前に移動したp要素を6-9行目のdiv要素の前に移動します。

以下は、ボタン7を押したときの図です。

insertBeforeメソッド

  • jQueryのinsertBeforeメソッドです。
  • 要素を指定の要素の前に移動します。
  • $(移動する対象).insertBefore(移動先)
  • 以下はjQueryサイトのinsertBeforeメソッドのページです。
    http://api.jquery.com/insertBefore/

関連の記事

jQuery 要素を追加するサンプル(before/after/prepend/append)
jQuery 要素を置き換える(replaceWith/replaceAll)
jQuery 要素を削除するremoveとemptyの違い

△上に戻る