jQueryの要素の追加

jQueryの非常に重要な部分はDOMを操作できることです。

jQueryは効果的に新しいHTML要素を追加する方法を提供しています。

本章では、DOMに新しいHTML要素を追加する方法を説明します。/内容。

jQueryで新しいHTML内容を追加

jQueryを使用すると、新しいHTML要素を簡単に追加できます。

以下に、新しい内容を追加するために使用するjQueryメソッドがあります：

• append()

• prepend()

• after()

• before()

• wrap()

以下に、各メソッドを使用する方法を説明します。

jQuery append()メソッド

jQuery append()このメソッドは選択された要素の末尾（最後の子要素として）に指定された内容を挿入します。

以下の例では、すべての段落にテキスト内容を追加します：

$("button").click(function(){
　　$("p").append("Hello world");
});

以下の例では、すべての段落にHTMLを追加します：

$("button").click(function(){
　　$("p").append("<b>Hello world</b>");
});

jQuery prepend()メソッド

jQuery prepend()このメソッドは選択された要素の先頭（最初の子要素として）に指定された内容を挿入します。

以下の例では、すべての段落の前にテキスト内容を挿入します：

$("button").click(function(){
　　$("p").prepend("Hello world");
});

以下の例では、すべての段落の前にHTMLを挿入します：

$("button").click(function(){
　　$("p").prepend("<b>Hello world</b>");
});

append()とprepend()を使用して複数の要素を追加

上記の例では、選択されたHTML要素の開始部分にのみ/末尾にテキストが挿入されました/ HTML。

ただし、append()およびprepend()これらのメソッドは無限数の新しい要素を引数として受け取ることができます。

新しい要素はHTML要素（上記の例のように）、DOM要素、またはjQueryオブジェクトで生成できます。

以下の例では、HTML要素、DOM要素、jQueryオブジェクトを使用して新しい要素をいくつか作成します：

function appendText() {
　　let x = "<p>サンプルテキスト.<"/p>";　　//　HTMLを使用して要素を作成　　
　　let　y　=　$("<p></p>").text("サンプルテキスト.");　　//　jQueryを使用して作成
　　let　z　=　document.createElement("p");//　DOMを使用して作成
　　z.innerHTML　=　"サンプルテキスト.";
　　$("body").append(x, y, z);　　//新しい要素を追加　
}

jQuery after()メソッド

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

以下の例では、各段落の後に内容を挿入します：

$("button").click(function(){
　　$("p").after("<p>Hello world</p>");
});

jQuery before()メソッド

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

以下の例では、各段落の前に内容を挿入します：

$("button").click(function(){
　　$("p").before("<p>Hello world</p>");
});

after()とbefore()を使用して複数の要素を追加

同様に、after()およびbefore()これらのメソッドは無限数の新しい要素を引数として受け取ることができます。

新しい要素はHTML要素（上記の例のように）、DOM要素、またはjQueryオブジェクトで生成できます。

以下の例では、HTML要素、DOM要素、jQueryオブジェクトを使用して新しい要素をいくつか作成します：

function afterText() {
　　let x = "<p>サンプルテキスト.<"/p>";　　//　HTMLを使用して要素を作成　　
　　let　y　=　$("<p></p>").text("サンプルテキスト.");　　//　jQueryを使用して作成
　　let　z　=　document.createElement("p");//　DOMを使用して作成
　　z.innerHTML　=　"サンプルテキスト.";
　$("h1").after(x,　y,　z);　　//　在<h1>の後に新しい要素を挿入する
}

jQuery wrap()メソッド

jQuery wrap()メソッドは指定されたHTML構造を選択された各要素の前後に包みます。

以下のサンプルでは、<p>要素の前後に関数要素を包みます：

$("button").click(function(){
　　$("p").wrap("<div></div>
});

jQueryのHTMLリファレンス

完全なHTMLメソッドのリファレンスについては、以下のURLを訪れてください。jQueryのHTML / CSSリファレンス。