jQuery append vs prepend：リスト項目の追加方法を比較
2024-04-02
jQuery を使用して既存の順序なしリストにリスト項目を追加する方法
append() メソッドは、要素の最後に新しいコンテンツを追加します。 以下のコードは、ul 要素の最後に新しいリスト項目を追加します。
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
$(function() {
$("#my-list").append("<li>Item 3</li>");
});
このコードを実行すると、ul 要素に "Item 3" という新しいリスト項目が追加されます。
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
$(function() {
$("#my-list").prepend("<li>Item 0</li>");
});
上記以外にも、リスト項目を追加する方法はいくつかあります。
after()メソッド: 既存の要素の後に新しい要素を追加します。html()メソッド: 要素の内容を完全に置き換えます。
jQuery を使用すると、既存の順序なしリストに簡単にリスト項目を追加することができます。 どの方法を使用するかは、追加したい項目の位置によって異なります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery サンプル</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>リスト項目の追加</h1>
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="add-item">リスト項目を追加</button>
<script>
$(function() {
$("#add-item").click(function() {
// `append()` メソッドを使用してリスト項目を追加
$("#my-list").append("<li>Item 3</li>");
// `prepend()` メソッドを使用してリスト項目を追加
// $("#my-list").prepend("<li>Item 0</li>");
// `after()` メソッドを使用してリスト項目を追加
// $("#my-list li:last").after("<li>Item 4</li>");
// `before()` メソッドを使用してリスト項目を追加
// $("#my-list li:first").before("<li>Item -1</li>");
// `html()` メソッドを使用してリスト項目を置き換える
// $("#my-list").html("<li>Item 1</li><li>Item 2</li><li>Item 3</li>");
});
});
</script>
</body>
</html>
このコードを保存してブラウザで開くと、"リスト項目を追加" ボタンをクリックするたびに、ul 要素に新しいリスト項目が追加されます。
注釈
- 上記のコードは、jQuery 3.6.0 を使用しています。
- コードを実行するには、jQuery ライブラリが必要です。
他の方法
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
$(function() {
$("#my-list li:last").after("<li>Item 3</li>");
});
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
$(function() {
$("#my-list li:first").before("<li>Item 0</li>");
});
html() メソッドは、要素の内容を完全に置き換えます。 以下のコードは、ul 要素の内容を 3 つのリスト項目に置き換えます。
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
$(function() {
$("#my-list").html("<li>Item 1</li><li>Item 2</li><li>Item 3</li>");
});
このコードを実行すると、ul 要素の内容が "Item 1", "Item 2", "Item 3" になります。
.text() メソッドは、要素内のテキストのみを変更します。 以下のコードは、ul 要素内の最後のリスト項目のテキストを "Item 3" に変更します。
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
$(function() {
$("#my-list li:last").text("Item 3");
});
このコードを実行すると、ul 要素内の最後のリスト項目のテキストが "Item 3" に変更されます。
jQuery を使用してリスト項目を追加するには、さまざまな方法があります。 どの方法を使用するかは、追加したい項目の位置や、要素の内容を変更したいかどうかによって異なります。
jquery jquery-append
