jQuery逆引きリファレンス
ページに新たな要素を挿入するには？ ― insertBefore／insertAfter／prependTo／appendTo／before／after／prepend／appendメソッド
HTML文字列で要素を作成してから、指定した場所にそれを挿入する方法を解説。また結果は同じになるが少し手順を変えて、指定した場所にHTML文字列で要素を生成する方法を説明する。
ページに新たな要素を挿入するには、insertBefore／insertAfter／prependTo／appendToメソッドを利用します。それぞれの違いは後で触れるとして、まずはサンプルを見てみることにしましょう。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</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>
|
ページのロードが完了すると……
以下に、insertBefore／insertAfter／prependTo／appendToメソッドの構文を示します。
［構文］insertBefore／insertAfter／prependTo／appendToメソッド
$(insert).method(selector)
- insert： 新規に挿入する要素
- method：
insertBefore／insertAfter／prependTo／appendToのいずれか - selector： 挿入先を表すセレクター式
新規に作成した要素insertを、selectorが示す先に挿入するわけです。それぞれのメソッドの違いは、selectorに対する要素insertの挿入位置です（図1）。
なお、新規の要素を生成するには$()関数に対して、タグ文字列を指定します。この際、タグ文字列は<で始まり、その後方に>がなければならない点に注意してください。例えば「<p>Build Insider</p>」は可ですが、「Build Insider<br />」のような文字列は「Syntax error, unrecognized expression: Build Insider<br />」のようなエラーとなります。
もう一つの挿入系メソッド
挿入系メソッドにはもう一つ、insertBefore／insertAfter／prependTo／appendToメソッドとそれぞれ対となるbefore／after／prepend／appendメソッドがあります。対とは、メソッド呼び出しにおいてオブジェクトと引数の関係が逆転しているということです。
［構文］before／after／prepend／appendメソッド
$(selector).method(insert)
- selector： 挿入先を表すセレクター式
- method：
before／after／prepend／appendのいずれか - insert： 新規に挿入する要素
先ほどのサンプルは、before／after／prepend／appendメソッドを利用することで、以下のように書き換えられます。
|
$(function () {
$('#main')
.prepend('<p>ヴァイオリン</p>')
.append('<p>チェロ</p>')
.before('<div id="flute">フルート</div>')
.after('<div id="piano">ピアノ</div>');
});
|
いずれのメソッドも意味的には等価ですので、その時どきの文脈で使い分ければよく、どちらを使っても構いません。本稿の例であれば、同じ要素に対して順番に要素を追加しているので、メソッドチェーンを利用できるbefore／after／prepend／appendメソッドを使った方がコードはシンプルになります。
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］を参照してください。
50. フォーム要素に対して値を設定するには？（val）
valメソッドを使ってフォーム要素の値を設定する方法を説明。また、利用上の注意点や、値をクリアする方法、応用例として全てのチェックボックスを選択／解除する方法も示す。
51. jQuery1.x／2.xで作成したアプリをjQuery 3に対応させるには？
2016年6月、jQuery 3.0が正式リリースされた。今後は、従来バージョンのjQueryを使った既存のサイト／ページを、最新のバージョン3に徐々に移行していこう。移行ライブラリ「jQuery Migration」を使った方法を解説する。
52. 【現在、表示中】≫ ページに新たな要素を挿入するには？ ― insertBefore／insertAfter／prependTo／appendTo／before／after／prepend／appendメソッド
HTML文字列で要素を作成してから、指定した場所にそれを挿入する方法を解説。また結果は同じになるが少し手順を変えて、指定した場所にHTML文字列で要素を生成する方法を説明する。
53. 既存の要素を別の場所に移動するには？ ― insertBefore／insertAfter／prependTo／appendToメソッド
既存の要素を、指定した要素の直前／直後／子要素先頭／子要素末尾の位置に移動する方法を説明する。
54. 既存の要素を別の要素で置き換えるには？ ― replaceWith／replaceAllメソッド
既存の要素を選択し、それをHTML文字列により生成した新規要素もしくはjQueryオブジェクトで置き換える方法を解説。また結果は同じになるが少し手順を変えて、HTML文字列による新規要素もしくはjQueryオブジェクトで既存の要素を置き換える方法も説明する。
