jQuery - 要素の追加

jQuery を使用すると、新しい要素やコンテンツを簡単に追加できます。

新しい HTML コンテンツの追加

新しいコンテンツを追加するための 4 つの jQuery メソッドを学習します。

  • append() - 選択した要素の末尾にコンテンツを挿入します
  • prepend() - 選択した要素の先頭にコンテンツを挿入します
  • after() - 選択した要素の後ろにコンテンツを挿入します
  • before() - 選択した要素の前にコンテンツを挿入します

jQuery append() メソッド

jQuery append() メソッドは、選択した要素の末尾（その要素の内側）にコンテンツを挿入します。

例

$("p").append("テキストを追加");

試してみる »

jQuery prepend() メソッド

jQuery prepend() メソッドは、選択した要素の先頭にコンテンツを挿入します。

例

$("p").prepend("先頭にテキストを追加");

試してみる »

append() と prepend() メソッドを使用して複数の新しい要素を追加する

上の例では、選択した要素の先頭/末尾にテキスト/HTML を挿入しただけです。

ただし、append() と prepend() メソッドは、引数として無制限に新しい要素を受け取ることができます。テキスト/HTML は jQuery で生成することもできます（上の例のように）、JavaScript コードや DOM 要素で生成することもできます。

次の例では、いくつかの新しい要素を作成します。これらの要素は、text/HTML、jQuery、または JavaScript/DOM で作成できます。次に、append() メソッドを使用してこれらの新しい要素をテキストに追加します（prepend() でも同様に有効です）。

例

function appendText(){ var txt1="<p>テキスト-1。</p>"; //HTML タグを使用してテキストを作成 var txt2=$("<p></p>").text("テキスト-2。"); //jQuery を使用してテキストを作成 var txt3=document.createElement("p"); txt3.innerHTML="テキスト-3。"; //DOM を使用してテキストを作成 text with DOM $("body").append(txt1,txt2,txt3); //新しい要素を追加 }

試してみる »

jQuery after() と before() メソッド

jQuery after() メソッドは、選択した要素の後ろにコンテンツを挿入します。

jQuery before() メソッドは、選択した要素の前にコンテンツを挿入します。

例

$("img").after("後ろにテキストを追加"); $("img").before("前にテキストを追加");

試してみる »

after() と before() メソッドを使用して複数の新しい要素を追加する

after() と before() メソッドは、引数として無制限に新しい要素を受け取ることができます。新しい要素は、text/HTML、jQuery、または JavaScript/DOM で作成できます。

次の例では、いくつかの新しい要素を作成します。これらの要素は、text/HTML、jQuery、または JavaScript/DOM で作成できます。次に、after() メソッドを使用してこれらの新しい要素をテキストに挿入します（before() でも同様に有効です）。

例

function afterText() { var txt1="<b>I </b>"; //HTML を使用して要素を作成 var txt2=$("<i></i>").text("love "); //jQuery を使用して要素を作成 var txt3=document.createElement("big"); //DOM を使用して要素を作成 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); //画像の後ろにテキストを追加 }

試してみる »
その他の拡張