[jQuery] 要素を移動する（.insertAfter, .insertBefore）

投稿日：2017年6月16日更新日：2018年4月28日

jQueryで要素を移動するには、insertAfter、insertBeforeを使用します。

構文

（構文）: // ＜b＞の後に＜a＞を移動する $(＜a＞).insertAfter(＜b＞); // ＜b＞の前に＜a＞を移動する $(＜a＞).insertBefore(＜b＞);

サンプルソース

例）ボタンを押すと要素を移動する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){
    $('#p1').insertAfter("#p3"); //p3の後にp1
  });
  $('#btn2').click(function(){
    $('#p1').insertBefore("#p3"); //p3の前にp1
  });
});
</script>
</head>
<body>
  <input type="button" id="btn1" value="after">
  <input type="button" id="btn2" value="before">
  <p id="p1">P1</p>
  <p id="p2">P2</p>
  <p id="p3">P3</p>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(){

$('#p1').insertAfter("#p3"); //p3の後にp1

});

$('#btn2').click(function(){

$('#p1').insertBefore("#p3"); //p3の前にp1

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと要素「P1」が移動します。

執筆者：とら