jQuery でリストの先頭に要素を追加するその他の方法

2024-04-02

jQuery でリストの先頭/トップに要素を追加する方法

prepend() メソッドを使う

prepend() メソッドは、要素を既存の要素の前に挿入するために使用されます。リストの先頭に要素を追加するには、このメソッドを以下のように使用します。

$(リストのセレクタ).prepend(追加する要素);

例:

<ul id="my-list">
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
</ul>

$(document).ready(function() {
  $("#my-list").prepend("<li>新しいアイテム</li>");
});

このコードを実行すると、新しいアイテム というリストアイテムが my-list リストの先頭に挿入されます。

$(追加する要素).before($(リストの最初の要素));

<ul id="my-list">
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
</ul>

$(document).ready(function() {
  $("<li>新しいアイテム</li>").before($("#my-list li:first"));
});

prepend() メソッドは、単純にリストの先頭に要素を追加したい場合に適しています。
before() メソッドは、既存の要素を基準にして要素を挿入したい場合に適しています。

補足

上記の例では、HTML 要素を直接文字列として記述していますが、jQuery オブジェクトを作成して使用することもできます。
複数の要素をまとめて追加したい場合は、カンマ区切りで指定できます。

$("#my-list").prepend("<li>新しいアイテム 1</li>, <li>新しいアイテム 2</li>");

以上、jQuery でリストの先頭/トップに要素を追加する方法について説明しました。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery prepend() example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#my-list").prepend("<li>新しいアイテム</li>");
    });
  </script>
</head>
<body>
  <ul id="my-list">
    <li>アイテム 1</li>
    <li>アイテム 2</li>
    <li>アイテム 3</li>
  </ul>
</body>
</html>

このコードを実行すると、ブラウザに以下のリストが表示されます。

新しいアイテム
アイテム 1
アイテム 2
アイテム 3

<!DOCTYPE html>
<html>
<head>
  <title>jQuery before() example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("<li>新しいアイテム</li>").before($("#my-list li:first"));
    });
  </script>
</head>
<body>
  <ul id="my-list">
    <li>アイテム 1</li>
    <li>アイテム 2</li>
    <li>アイテム 3</li>
  </ul>
</body>
</html>

新しいアイテム
アイテム 1
アイテム 2
アイテム 3

説明

上記のコードは、HTML ファイルと JavaScript ファイルで構成されています。
HTML ファイルには、リスト (my-list) が定義されています。
JavaScript ファイルには、jQuery を使ってリストの先頭に要素を追加するコードが記述されています。
prepend() メソッドと before() メソッドの両方とも、リストの先頭に 新しいアイテム というリストアイテムを追加します。
それぞれのメソッドの動作は微妙に異なります。
- prepend() メソッドは、my-list 要素の子要素として 新しいアイテム を挿入します。
- before() メソッドは、my-list の最初のリストアイテム (アイテム 1) の直前に 新しいアイテム を挿入します。

応用例

新しいアイテムを常にリストの先頭に挿入したい場合
既存のアイテムを基準にして新しいアイテムを挿入したい場合

jQuery でリストの先頭/トップに要素を追加するその他の方法

$(リストのセレクタ).html("<li>新しいアイテム</li>" + $(リストのセレクタ).html());

<ul id="my-list">
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
</ul>

$(document).ready(function() {
  $("#my-list").html("<li>新しいアイテム</li>" + $("#my-list").html());
});

$(追加する要素).wrap("<li>").prependTo($(リストのセレクタ));

<ul id="my-list">
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
</ul>

$(document).ready(function() {
  $("<span>新しいアイテム</span>").wrap("<li>").prependTo($("#my-list"));
});

DOM 操作を行う

jQuery 以外にも、JavaScript の DOM 操作を使ってリストの先頭に要素を追加することができます。

var list = document.getElementById("my-list");
var newItem = document.createElement("li");
newItem.textContent = "新しいアイテム";
list.insertBefore(newItem, list.firstChild);