jQuery入門 | 要素の操作 | 要素の追加 .append() .prepend() .before() .after()

既存要素の内部に追加

次のメソッドを使用すると、既存要素の内部に新しい要素やコンテンツを追加できる。

.append()メソッド

.append()メソッドは、選択された要素の最後に新しいHTML要素やコンテンツを追加する。

$(target).append(source)

sourceオブジェクトをtargetオブジェクトの最後に追加する。

次のようなHTML要素があるとき、

<ol id="list">
    <li>最初のアイテム</li>
    <li>2番目のアイテム</li>
</ol>

.append()メソッドを利用すると、2番目の<li>の後に新しいHTML要素を追加できる。

$("#list").append("<li>新しく追加されたアイテム</li>");

コードを実行

.prepend()メソッド

.prepend()メソッドは、選択した要素の最初に新しい要素やコンテンツを追加する。

$(target).prepend(source)

sourceオブジェクトをtargetオブジェクトの最初に追加する。

次のようなHTML要素があるとき、

<ol id="list">
    <li>最初のアイテム</li>
    <li>2番目のアイテム</li>
</ol>

.prepend()メソッドを利用すると、最初の<li>の前に新しいHTML要素を追加できる。

$("#list").prepend("<li>新しく追加されたアイテム</li>");

コードを実行

.appendTo()メソッド

.appendTo()メソッドは、選択した要素を対象要素の最後に追加する。 動作は.append()メソッドと同じだが、ソースとターゲットの位置が互いに反対になっている。

$(source).appendTo(target)

sourceオブジェクトをtargetオブジェクトの最後に追加する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.appendTo()メソッドを利用すると、最初の<p>の後に新しいHTML要素を追加できる。

$("<span>jQueryです。</span>").appendTo("p");

コードを実行

.prependTo()メソッド

.prependTo()メソッドは、選択した要素を対象要素の最初に追加する。 動作は.prepend()メソッドと同じだが、ソースとターゲットの位置が互いに反対になっている。

$(source).prependTo(target)

sourceオブジェクトをtargetオブジェクトの最初に追加する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.prependTo()メソッドを利用すると、<p>要素の前に新しいHTML要素を追加できる。

$("<span>jQueryです。</span>").prependTo("p");

コードを実行

既存要素の外部に追加

次のメソッドを使用すると、既存要素の前や後ろに新しい要素やコンテンツを追加できる。

.before()メソッド

.before()メソッドは、選択した要素の直前に新しい要素やコンテンツを追加する。

$(target).before(source)

sourceオブジェクトをtargetオブジェクトの直前に追加する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.before()メソッドを利用すると、<p>要素の前に新しいHTML要素を追加できる。

var i = 0;
$("button").on("click", function() {
    $("p").before("<div>" + (++i) + "番目の文章です。</div>");
});

このとき、ボタンをクリックするたびに変数iが増加して表示される。

コードを実行

.after()メソッド

.after()メソッドは、選択した要素の直後に新しい要素やコンテンツを追加する。

$(target).after(source)

sourceオブジェクトをtargetオブジェクトの直後に追加する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.after()メソッドを利用すると、最初の<p>の後に新しいHTML要素を追加できる。

var i = 0;
$("button").on("click", function() {
    $("p").after("<div>" + (++i) + "番目の文章です。</div>");
});

このとき、ボタンをクリックするたびに変数iが増加して表示される。

コードを実行

.insertBefore()メソッド

.insertBefore()メソッドは、選択した要素を対象要素の前に追加する。 動作は.before()メソッドと同じだが、ソースとターゲットの位置が互いに反対になっている。

$(source).insertBefore(target)

sourceオブジェクトをtargetオブジェクトの直前に追加する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.insertBefore()メソッドを利用すると、<p>要素の前に新しいHTML要素を追加できる。

var i = 0;
$("button").on("click", function() {
    $("<div>" + (++i) + "番目の文章です。</div>").insertBefore("p");
});

このとき、ボタンをクリックするたびに変数iが増加して表示される。

コードを実行

.insertAfter()メソッド

.insertAfter()メソッドは、選択した要素を対象要素の後ろに追加する。 動作は.after()メソッドと同じだが、ソースとターゲットの位置が互いに反対になっている。

$(source).insertAfter(target)

sourceオブジェクトをtargetオブジェクトの直後に追加する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.insertAfter()メソッドを利用すると、<p>要素の後ろに新しいHTML要素を追加できる。

var i = 0;
$("button").on("click", function() {
    $("<div>" + (++i) + "番目の文章です。</div>").insertAfter("p");
});

このとき、ボタンをクリックするたびに変数iが増加して表示される。

コードを実行

既存要素を含む要素の追加

次のメソッドを使用すると、既存要素を含む新しい要素やコンテンツを追加できる。

.wrap()メソッド

.wrap()メソッドは、選択した要素を包む新しい要素を追加する。

$(function() {
    $("button").on("click", function() {
        $("p").wrap("<div class='wrap'></div>");
    });
});

次のようなHTML要素があるとき、

<p>こんにちは。</p>
<p>devkumaです。</p>

.wrap()メソッドを利用すると、それぞれの<p>要素を新しいHTML要素で包むことができる。

$("p").wrap("<div class='wrap'></div>");

コードを実行

.wrapAll()メソッド

.wrapAll()メソッドは、選択したすべての要素を一度に包む新しい要素を追加する。

$(function() {
    $("button").on("click", function() {
        $("p").wrapAll("<div class='wrap'></div>");
    });
});

次のようなHTML要素があるとき、

<p>こんにちは。</p>
<p>devkumaです。</p>

.wrapAll()メソッドを利用すると、<p>要素をすべて一度に新しいHTML要素で包むことができる。

$("p").wrapAll("<div class='wrap'></div>");

コードを実行

.wrapInner()メソッド

.wrapInner()メソッドは、選択した要素の内部を包む新しい要素を追加する。

次のようなHTML要素があるとき、

<p>こんにちは。devkumaです。</p>

.wrapInner()メソッドを利用すると、<p>要素の内部を新しいHTML要素で包むことができる。

$("p").wrapInner("<div class='wrap'></div>");

コードを実行

既存要素の内部変更

次のメソッドを使用すると、既存要素の内部に新しい要素やコンテンツを返したり設定したりできる。

.html()メソッド

.html()メソッドは、選択した要素の内容を新しいHTML要素に変更する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.html()メソッドを利用すると、<p>要素の内容を新しいHTML要素に変更できる。

$("p").html("<div class='wrap'>devkumaです。</div>");

コードを実行

.text()メソッド

.text()メソッドは、選択した要素の内容を新しい単純なテキストに変更する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

.text()メソッドを利用すると、<p>要素の内容を新しいテキストに変更できる。

$("p").text("devkumaです。");

コードを実行

.html()メソッドと.text()メソッドの違い

.html()は選択した要素の内容にHTMLタグ要素が含まれていればタグを適用して表示するが、.text()の場合はHTMLタグを適用せず、文章をそのまま表示する。

次のようなHTML要素があるとき、

<p>こんにちは。</p>

次のようにHTMLを含む文を.text()で表示すると、HTMLタグは適用されず文がそのまま表示される。

$("p").text("<div class='wrap'>devkumaです。</div>");

コードを実行