Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

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

次の例では、いくつかの新しい要素を作成します。要素は、テキスト/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()メソッドは、無限の数の新しい要素をパラメーターとして受け取ることができます。新しい要素は、テキスト/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 HTMLリファレンス

すべてのjQuery HTMLメソッドの完全な概要については、jQuery HTML/CSSリファレンスを参照してください。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル