Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

ページに新たな要素を挿入するには? ― insertBefore/insertAfter/prependTo/appendTo/before/after/prepend/appendメソッド

2016年8月26日

HTML文字列で要素を作成してから、指定した場所にそれを挿入する方法を解説。また結果は同じになるが少し手順を変えて、指定した場所にHTML文字列で要素を生成する方法を説明する。

  • このエントリーをはてなブックマークに追加

 ページに新たな要素を挿入するには、insertBeforeinsertAfterprependToappendToメソッドを利用します。それぞれの違いは後で触れるとして、まずはサンプルを見てみることにしましょう。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div id="main">
  <p>ヴィオラ</p>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
  $('<p>ヴァイオリン</p>').prependTo('#main');
  $('<p>チェロ</p>').appendTo('#main');
  $('<div id="flute">フルート</div>').insertBefore('#main');
  $('<div id="piano">ピアノ</div>').insertAfter('#main');
});
</script>
</body>
</html>
リスト1 挿入系のメソッドを使って、新規の要素をページに挿入する例(insert.html)
ページのロードが完了すると……

ページのロードが完了すると……

指定された要素が挿入された
指定された要素が挿入された

 以下に、insertBeforeinsertAfterprependToappendToメソッドの構文を示します。

[構文]insertBefore/insertAfter/prependTo/appendToメソッド

$(insert).method(selector)

  • insert: 新規に挿入する要素
  • method: insertBeforeinsertAfterprependToappendToのいずれか
  • selector: 挿入先を表すセレクター式

 新規に作成した要素insertを、selectorが示す先に挿入するわけです。それぞれのメソッドの違いは、selectorに対する要素insertの挿入位置です(図1)。

図1 insertBefore/insertAfter/prependTo/appendToメソッドの挿入先の違い

 なお、新規の要素を生成するには$()関数に対して、タグ文字列を指定します。この際、タグ文字列は<で始まり、その後方に>がなければならない点に注意してください。例えば「<p>Build Insider</p>」は可ですが、「Build Insider<br />」のような文字列は「Syntax error, unrecognized expression: Build Insider<br />」のようなエラーとなります。

もう一つの挿入系メソッド

 挿入系メソッドにはもう一つ、insertBeforeinsertAfterprependToappendToメソッドとそれぞれ対となるbeforeafterprependappendメソッドがあります。対とは、メソッド呼び出しにおいてオブジェクトと引数の関係が逆転しているということです。

[構文]before/after/prepend/appendメソッド

$(selector).method(insert)

  • selector: 挿入先を表すセレクター式
  • method: beforeafterprependappendのいずれか
  • insert: 新規に挿入する要素

 先ほどのサンプルは、beforeafterprependappendメソッドを利用することで、以下のように書き換えられます。

JavaScript
$(function () {
  $('#main')
    .prepend('<p>ヴァイオリン</p>')
    .append('<p>チェロ</p>')
    .before('<div id="flute">フルート</div>')
    .after('<div id="piano">ピアノ</div>');
});
リスト2 挿入系のメソッドを使って、新規の要素をページに挿入する例(insert2.html)

 いずれのメソッドも意味的には等価ですので、その時どきの文脈で使い分ければよく、どちらを使っても構いません。本稿の例であれば、同じ要素に対して順番に要素を追加しているので、メソッドチェーンを利用できるbeforeafterprependappendメソッドを使った方がコードはシンプルになります。

処理対象:要素の挿入 カテゴリ:要素
API:jQuery() カテゴリ:Core(コア)
API:.insertBefore()|.insertAfter()|before()|.after() カテゴリ:Manipulation(操作) > DOM Insertion, Outside(DOM挿入、外部から)
API:.prependTo()|.appendTo()|.prepend()|.append() カテゴリ:Manipulation(操作) > DOM Insertion, Inside(DOM挿入、内部から)

※以下では、本稿の前後を合わせて5回分(第50回~第54回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
50. フォーム要素に対して値を設定するには?(val)

valメソッドを使ってフォーム要素の値を設定する方法を説明。また、利用上の注意点や、値をクリアする方法、応用例として全てのチェックボックスを選択/解除する方法も示す。

jQuery逆引きリファレンス
51. jQuery1.x/2.xで作成したアプリをjQuery 3に対応させるには?

2016年6月、jQuery 3.0が正式リリースされた。今後は、従来バージョンのjQueryを使った既存のサイト/ページを、最新のバージョン3に徐々に移行していこう。移行ライブラリ「jQuery Migration」を使った方法を解説する。

jQuery逆引きリファレンス
52. 【現在、表示中】≫ ページに新たな要素を挿入するには? ― insertBefore/insertAfter/prependTo/appendTo/before/after/prepend/appendメソッド

HTML文字列で要素を作成してから、指定した場所にそれを挿入する方法を解説。また結果は同じになるが少し手順を変えて、指定した場所にHTML文字列で要素を生成する方法を説明する。

jQuery逆引きリファレンス
53. 既存の要素を別の場所に移動するには? ― insertBefore/insertAfter/prependTo/appendToメソッド

既存の要素を、指定した要素の直前/直後/子要素先頭/子要素末尾の位置に移動する方法を説明する。

jQuery逆引きリファレンス
54. 既存の要素を別の要素で置き換えるには? ― replaceWith/replaceAllメソッド

既存の要素を選択し、それをHTML文字列により生成した新規要素もしくはjQueryオブジェクトで置き換える方法を解説。また結果は同じになるが少し手順を変えて、HTML文字列による新規要素もしくはjQueryオブジェクトで既存の要素を置き換える方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!