jQuery 要素を移動するサンプル(appendTo、prependTo、insertAfter、insertBefore)

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

目次

appendToメソッド

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

サンプル

appendToメソッドを使用したサンプルです。
ボタン1を押すと、あいうえおの文字が下の四角の456の下に移動します。
ボタン2を押すと、あいうえおの文字が上の四角の123の下に移動します。

123

あいうえお

456

コード

上記サンプルのコードです。
21行目は、appendToメソッドで33行目のp要素を35行目のdiv要素の子要素の最後に移動します。
25行目は、appendToメソッドで36行目P要素(456)の下に移動したp要素を31行目のdiv要素の子要素の最後に移動します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのサンプル</title>
<style>
#div1{
	border: 1px solid #000;
	margin-bottom:5px;
}
#div2{
	border: 1px dotted #000;
	margin-bottom:5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1が押されたときの動作
	$("#btn1").click(function() {
		$("#p1").appendTo("#div2");
	});
	// ボタン2が押されたときの動作
	$("#btn2").click(function() {
		$("#p1").appendTo("#div1");
	});
});
</script>
</head>
<body >
<div id="div1">
	<p>123</p>
	<p id="p1">あいうえお</p>
</div>
<div id="div2">
	<p>456</p>
</div>
<input type="button" id="btn1" value="ボタン1">
<input type="button" id="btn2" value="ボタン2">
</body>
</html>

prependToメソッド

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

サンプル

prependToメソッドを使用したサンプルです。
ボタン3を押すと、あいうえおの文字が下の四角の456の上に移動します。
ボタン4を押すと、あいうえおの文字が上の四角の123の上に移動します。

123

あいうえお

456

コード

上記サンプルのコードです。
16行目は、prependToメソッドで28行目のp要素を30行目のdiv要素の子要素の先頭に移動します。
20行目は、prependToメソッドで31行目のP要素(456)の上に移動したp要素を26行目のdiv要素の子要素の先頭に移動します。

<style>
#div3{
	border: 1px solid #000;
	margin-bottom:5px;
}
#div4{
	border: 1px dotted #000;
	margin-bottom:5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン3が押されたときの動作
	$("#btn3").click(function() {
		$("#p3").prependTo("#div4");
	});
	// ボタン4が押されたときの動作
	$("#btn4").click(function() {
		$("#p3").prependTo("#div3");
	});
});
</script>

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

insertAfterメソッド

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

サンプル

insertAfterメソッドを使用したサンプルです。
ボタン5を押すと、あいうえおの文字が下の四角の下に移動します。
ボタン6を押すと、あいうえおの文字が上の四角の下に移動します。

123

あいうえお

456

コード

上記サンプルのコードです。
16行目は、insertAfterメソッドで28行目のp要素を30-32行目のdiv要素の後ろに移動します。
20行目は、insertAfterメソッドで30-32行目のdiv要素の後ろに移動したp要素を26-29行目のdiv要素の後ろに移動します。

<style>
#div5{
	border: 1px solid #000;
	margin-bottom:5px;
}
#div6{
	border: 1px dotted #000;
	margin-bottom:5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン5が押されたときの動作
	$("#btn5").click(function() {
		$("#p5").insertAfter("#div6");
	});
	// ボタン6が押されたときの動作
	$("#btn6").click(function() {
		$("#p5").insertAfter("#div5");
	});
});
</script>

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

insertBeforeメソッド

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

サンプル

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

123

あいうえお

456

コード

上記サンプルのコードです。
16行目は、insertBeforeメソッドで28行目のp要素を30-32行目のdiv要素の前に移動します。
20行目は、insertBeforeメソッドで30-32行目のdiv要素の前に移動したp要素を26-29行目のdiv要素の前に移動します。

<style>
#div7{
	border: 1px solid #000;
	margin-bottom:5px;
}
#div8{
	border: 1px dotted #000;
	margin-bottom:5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン7が押されたときの動作
	$("#btn7").click(function() {
		$("#p7").insertBefore("#div8");
	});
	// ボタン8が押されたときの動作
	$("#btn8").click(function() {
		$("#p7").insertBefore("#div7");
	});
});
</script>

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

関連の記事

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




△上に戻る