【jQuery】指定した要素の前後に追加する方法

Web開発におけるフロントエンドの技術は日進月歩で進化していますが、jQueryはその中心的な役割を長く維持してきました。この記事では、jQueryの基本的なメソッドの一つであるbefore()とafter()の使い方に焦点を当てて解説します。

before() とは？
after() の使用方法
使用シーンの例
サンプル
まとめ

before() とは？

before()メソッドは、指定した要素の前に新しい内容を追加するためのものです。例えば、ある段落の前に新しい段落を追加する場合、以下のように使用します。

$("#targetParagraph").before("<p>これは新しい段落です。</p>");

after() の使用方法

after()メソッドは、指定した要素の後ろに新しい内容を追加するためのものです。以下の例では、目的の段落の後に新しい段落を追加しています。

$("#targetParagraph").after("<p>これも新しい段落です。</p>");

使用シーンの例

フォームの入力項目追加: ユーザーのアクションに応じて、新しい入力フィールドをフォームに追加する場面でbefore()やafter()を活用できます。
動的なコンテンツ表示: ユーザーの操作や外部データの変更に応じて、ページの特定の位置に新しい情報や画像を表示する場合にも使用します。

サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery before() & after() 実例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<form id="myForm">
    <input type="text" placeholder="名前を入力" id="nameInput">
    <button type="button" id="addAddress">住所フィールドを追加</button>
    <input type="submit" value="送信">
</form>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

$(document).ready(function() {
    $("#addAddress").click(function() {
        // 名前の入力フィールドの後ろに新しい住所の入力フィールドを追加
        $("#nameInput").after('<input type="text" placeholder="住所を入力">');
    });
});

このサンプルでは、ボタンをクリックすると名前の入力フィールドの後ろに新しい住所の入力フィールドが追加されます。このように、before() と after() メソッドを使用して、ユーザーのインタラクションに応じて動的に要素をページに追加することができます。