【jQuery入門】ページに新しいコンテンツを挿入する

文字列からjQueryオブジェクトを作成する

$()関数は、これまで文書の中から特定の要素を取り出すために利用していた。

これは$()関数の最も代表的な使い方ですが、唯一の使い方ではない

HTML文字列からjQueryオブジェクトを生成する場合も、$()関数を使う

$()関数を使った文字列→jQueryオブジェクトの変換は、新規のHTML文字列を生成＆追加するような局面ではよく利用する

要素挿入のためのさまざまなメソッド。insertBefore, insertAfter, prependTo, appendToメソッド

要素の直前に挿入するinsertBeforeメソッド

insertBeforeメソッドは、新しい要素をセレクターで指定した要素の直前に挿入する。

要素の直後に挿入するinsertAfterメソッド

insertAfterメソッドは、新しい要素をセレクターで指定した要素の直後に挿入する。

要素内の先頭に挿入するprependToメソッド

prependToメソッドは、新しい要素をセレクターで指定した要素内の先頭に挿入する。

要素内の末尾に挿入するappendToメソッド

appendToメソッドは、新しい要素をセレクターで指定した要素内の末尾に挿入する。

<ul id="car">
  <li>自転車</li>
</ul>

$(function () {
  $("<li>三輪車</li>").prependTo("#car"); // id="car"の要素の子要素の先頭に要素を追加
  $("<li>オートバイ</li>").appendTo("#car"); // id="car"の要素の子要素の末尾に要素を追加
  $("<p>ベビーカー</p>").insertBefore("#car"); // id="car"の要素の前に要素を追加
  $("<p>自動車</p>").insertAfter("#car"); // id="car"の要素の後ろに要素を追加
});

See the Pen
jQuery6-4 by shinjiezumi (@sezumi)
on CodePen.

今ある要素を別の要素に移動するinsertBefore, insertAfter, prependTo, appendToメソッド

これらのメソッドを利用することでページ内の要素を別の場所に移動することもできる

<p id="baby">ベビーカー</p>
<ul id="car2">
  <li>三輪車</li>
  <li>自転車</li>
  <li>オートバイ</li>
</ul>
<p>自動車</p>

$(function () {
  $("#baby").insertAfter("#car2");
});

See the Pen
jQuery7-1 by shinjiezumi (@sezumi)
on CodePen.

要素を挿入するもうひとつの方法, before, after, prepend, appendメソッド

jQueryには要素を挿入する別の方法として、before, after, prepend, afeterメソッドがある。

insertBeforeなどと違うのは、オブジェクトと引数の関係が逆転している点。

<ul id="car3">
  <li>自転車</li>
</ul>

$(function () {
  $("#car3").prepend("<li>三輪車</li>");
  $("#car3").append("<li>オートバイ</li>");
  $("#car3").before("<p>ベビーカー</p>");
  $("#car3").after("<p>自動車</p");
});

See the Pen
jQuery7-2 by shinjiezumi (@sezumi)
on CodePen.

メソッドチェーン

メソッドチェーンを利用して以下のように記述できる

<ul id="car4">
  <li>自転車</li>
</ul>

$(function () {
  $("#car4")
    .prepend("<li>三輪車</li>")
    .append("<li>オートバイ</li>")
    .before("<p>ベビーカー</p>")
    .after("<p>自動車</p");
});

See the Pen
jQuery7-4 by shinjiezumi (@sezumi)
on CodePen.