jQuery - 指定した要素の前、または後ろへの要素の追加

公開日:2018-12-10 更新日:2019-05-14
[jQuery]

1. 概要

指定した要素の前、または後ろに、要素を追加します。

要素を追加するには、それぞれ2種類の方法があります。
追加としての機能は同じですが、メソッドを実行する際の要素や、引数が異なります。
また、戻り値がメソッドの呼び出し元の要素となるため、メソッドチェーンを使った時の動作が異なります。

$(要素).before(  前に追加する要素)
$(要素).after (後ろに追加する要素)

$(  前に追加する要素').insertBefore(要素)
$(後ろに追加する要素').insertAfter (要素)

2.1 サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->

  <div id="test">
    <div id="a1">A-1</div>
    <div id="a2">A-2</div>
    <div id="a3">A-3</div>
  </div>

  <!-- Script -->
  <script>
    $(function() {
      
      $("#a2").before('<div>前</div>' ).css("color", "red");
      $("#a2").after ('<div>後ろ</div>').css("color", "skyblue");

    });
  </script>

</body></html>

実行結果:画面


2.2 サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->

  <div id="test">
    <div id="a1">A-1</div>
    <div id="a2">A-2</div>
    <div id="a3">A-3</div>
  </div>

  <!-- Script -->
  <script>
    $(function() {
      
      $('<div>前</div>'  ).insertBefore($("#a2")).css("color", "red");
      $('<div>後ろ</div>').insertAfter ($("#a2")).css("color", "skyblue");

    });
  </script>

</body></html>

実行結果:画面