jQuery-要素を追加
jQueryを使用すると、新しい要素/コンテンツを簡単に追加できます。
新しいHTMLコンテンツを追加する
新しいコンテンツを追加するために使用される4つのjQueryメソッドを見ていきます。
append()-選択した要素の最後にコンテンツを挿入しますprepend()-選択した要素の先頭にコンテンツを挿入しますafter()-選択した要素の後にコンテンツを挿入しますbefore()-選択した要素の前にコンテンツを挿入します
jQuery append（）メソッド
jQueryappend()メソッドは、選択したHTML要素の最後にコンテンツを挿入します。
例
$("p").append("Some appended text.");
jQuery prepend（）メソッド
jQueryprepend()メソッドは、選択したHTML要素の先頭にコンテンツを挿入します。
例
$("p").prepend("Some prepended text.");
append（）とprepend（）を使用していくつかの新しい要素を追加します
上記の両方の例では、選択したHTML要素の最初/最後に一部のテキスト/ 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
}
jQuery after（）およびbefore（）メソッド
jQueryafter()メソッドは、選択したHTML要素の後にコンテンツを挿入します。
jQuerybefore()メソッドは、選択したHTML要素の前にコンテンツを挿入します。
例
$("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>";
// 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>
}
jQueryの演習
jQueryHTMLリファレンス
すべてのjQueryHTMLメソッドの完全な概要については、 jQuery HTML / CSSリファレンスにアクセスしてください。