jQuery - 要素内の先頭、または最後への子要素の追加

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

1. 概要

指定した要素内の先頭、または最後に、子要素を追加します。

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

$(要素).prepend(先頭に追加する要素)
$(要素).append (最後に追加する要素)

$(先頭に追加する要素').prependTo(要素)
$(最後に追加する要素').appendTo (要素)

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() {
      
      $("#test").prepend('<div>先頭に追加</div>').css("color", "red");
      $("#test").append ('<div>最後に追加</div>').css("color", "red");

    });
  </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>').prependTo($("#test")).css("color", "red");
      $('<div>最後に追加</div>').appendTo ($("#test")).css("color", "red");
      
    });
  </script>

</body></html>

実行結果：画面



Tag

New Article