jQuery を使用すれば、新しい要素/コンテンツの追加が簡単です。
新しいコンテンツを追加するために使用する 4 つの jQuery メソッドを見ていきます：
jQuery append() メソッドは、選択した HTML 要素の末尾にコンテンツを挿入します。
jQuery prepend() メソッドは、選択した HTML 要素の先頭にコンテンツを挿入します。
上記 2 つの例では、選択した HTML 要素の先頭/末尾に text/HTML を挿入しただけでした。
しかし、append() と prepend() の両メソッドには、パラメータとして新しい要素を無制限に指定することができます。 新しい要素は、（上記の例で行ったような）text/HTML で、jQuery で、JavaScript コードと DOM 要素で生成することができます。
下の例では、幾つかの新規要素を作成します。要素は、text/HTML、jQuery、JavaScript/DOM で作成します。 次に、append() メソッドを使用し、新規要素をテキストの最後に付加します（prepend() でも同様に動作します）：
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
Try it Yourself »
jQuery after() メソッドは、選択した要素の後にコンテンツを挿入します。
jQuery before() メソッドは、選択した要素の前にコンテンツを挿入します。
after() と before() の両メソッドには、パラメータとして新しい要素を無制限に指定することができます。 新しい要素は、（上記の例で行ったような）text/HTMでL、jQueryで、JavaScript コードと DOM 要素で生成することができます。
下の例では、幾つかの新規要素を作成します。要素は、text/HTML、jQuery、JavaScript/DOM で作成します。 次に、after() メソッドを使用し、新規要素をテキストに挿入します（before() でも同様に動作します）：
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
Try it Yourself »
練習問題 1 » 練習問題 2 » 練習問題 3 » 練習問題 4 »
すべての jQuery HTML メソッドの完全な概要については、jQuery HTML/CSS リファレンスをご覧ください。