ywork2020.com

Title

要素を要素の直前に移動する

目次 (INDEX)

insertBeforeとは

ここで説明する insertBefore とは次の語句からなるjQueryのメソッドです。
insert
読み: インサート
意味: 挿入する、差し込む
before
読み: ビフォー
意味: ~以前、~の前に

目次に戻る

insertBeforeメソッドの概要

このメソッドは、呼び出し元の要素を、引数セレクターに該当する要素の直前に移動します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(moveSelector).insertBefore(targetSelector);

目次に戻る

サンプルコードと実行結果

ここでは、div要素を2つ用意しました。 1つ目は移動先のターゲットとなる要素です。2つ目は insertBefore()の呼び出し元の要素となります。

サンプルではボタンをクリックすると、この insertBefore() メソッドの呼び出し元の要素がターゲット要素の直前に移動します。

サンプルコード: CSS
<style>
	#idDiv_T, #idDiv_M, #idButton{
		border: thin solid currentColor;
		margin: 0.5em;
		padding: 1em;
	}
	#idDiv_T{
		background-color: ##lightpink;
	}
	#idDiv_M{
		background-color: ##lightblue;
		font-weight: bold;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idDiv_T">Target container</div>
	<div id="idDiv_M">Containers to move</div>
	<button id="idButton">Move to before</button>
	<script>...</script>
</body>
  • 06: div (id="idDiv_T" は移動先のターゲット要素として扱います。)
  • 07: div (id="idDiv_M" は移動する要素として扱います。)
  • 08: button (id="idButton" はクリックされた時に関数を実行します。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("#idDiv_M").insertBefore("#idDiv_T");
	});
</script>
  • 02-04: click(function(){処理}) (関数を呼び出します。クリックすると実行される処理を表します。)
  • 03: insertBefore(ターゲット) (呼び出し元の要素はターゲットの直前に移動します。)
  • 補足: (ここでは、リセットについてのコードは省略しています。)
実行結果:
Target container
Containers to move

目次に戻る