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()メソッドは無限数の新しい要素を受け取ることができます。上記の例のようにjQueryを使ってテキスト/HTMLを作成したり、JavaScriptコードとDOM要素を使って作成できます。

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

例

function appendText()
{
var txt1="<p>テキスト。</p>";               // HTMLで新しい要素を作成
var txt2=$("<p></p>").text("テキスト。");   // jQueryで新しい要素を作成
var txt3=document.createElement("p");  // DOMを通じて新しい要素を作成
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 新しい要素を追加
{}

実際に試してみてください

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

jQuery after() メソッドは、選択された要素の後に内容を挿入します。

jQuery before() メソッドは、選択された要素の前に内容を挿入します。

例

$("img").after("Some text after");
$("img").before("Some text 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);          // img の後ろに新しい要素を挿入
{}

実際に試してみてください

jQuery HTML リファレンスマニュアル

jQuery HTML メソッドの完全な内容に関しては、以下のリファレンスマニュアルを訪れてください：