最新のWeb開発のチュートリアル
 

jQuery - 要素を追加します。

❮前 次の章❯

jQueryを使って、新しい要素/コンテンツを追加することは容易です。

新しいHTMLコンテンツを追加します。

私たちは、新しいコンテンツを追加するために使用される4つのjQueryの方法を見ていきます。

  • append() -選択された要素の末尾に挿入したコンテンツ
  • prepend() -選択された要素の先頭に挿入したコンテンツ
  • after() -選択した要素の後にコンテンツを挿入します
  • before() -選択された要素の前に挿入したコンテンツ

jQueryのappend()メソッド

jQueryのappend()メソッドは、選択されたHTML要素の最後にコンテンツを挿入します。

例

$("p").append("Some appended text.");
»それを自分で試してみてください

jQueryのprepend()メソッド

jQueryのprepend()メソッドは、選択されたHTML要素の先頭にコンテンツを挿入します。

例

$("p").prepend("Some prepended text.");
»それを自分で試してみてください

では、いくつかの新しい要素を追加append()とprepend()

上記の両方の例では、我々は唯一の選択されたHTML要素の開始/終了時にいくつかのテキスト/ HTMLを挿入しました。

しかし、両方append()とprepend()メソッドは、パラメータとして新しい要素の無限の数を取ることができます。 （私たちは、上記の例で行ったように）新しい要素がjQueryを使って、またはJavaScriptコードとDOM要素で、テキスト/ HTMLで生成することができます。

次の例では、我々はいくつかの新しい要素を作成します。 要素は、テキスト/ 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.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
»それを自分で試してみてください

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

jQueryのafter()メソッドは、選択されたHTML要素AFTERコンテンツを挿入します。

jQueryのbefore()メソッドは、選択されたHTML要素前にコンテンツを挿入します。

例

$("img").after("Some text after");

$("img").before("Some text before");
»それを自分で試してみてください

いくつかの新しい要素では、追加after()とbefore()

また、両方のafter()およびbefore()メソッドは、パラメータとして新しい要素の無限の数を取ることができます。 （私たちは、上記の例で行ったように）新しい要素がjQueryを使って、またはJavaScriptコードとDOM要素で、テキスト/ HTMLで生成することができます。

次の例では、我々はいくつかの新しい要素を作成します。 要素は、テキスト/ 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>
}
»それを自分で試してみてください

練習で自分自身をテスト！

演習1» 演習2» 演習3» 演習4»

jQueryのHTMLリファレンス

すべてのjQuery HTML法の完全な概要については、当社をご覧くださいjQueryのHTML / CSSリファレンス 。


❮前 次の章❯