初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

.prepend( )コンテンツを子要素の先頭に追加

構文

コンテンツを子要素の先頭に追加返値：jQueryオブジェクト
jQo.prepend( コンテンツ [,コンテンツ2] )ver1.0〜
jQo.prepend( function )ver1.4〜
コンテンツには文字の他、html要素やDOM要素、jQueryオブジェクトが設定できます。

機能

jQueryオブジェクトで指定した要素内（子要素）の先頭に、引数で指定したコンテンツを追加します。コンテンツには文字の他、html要素やDOM要素、jQueryオブジェクトが設定できます。また第2引数「コンテンツ2」を設定することで複数のコンテンツを追加することができます。

ver1.4からは引数にfunctionを指定することも可能で、条件によって追加する内容を変更するなど高度な処理にも対応できます。

解説

文字を追加

文字を追加したい場合は、prependメソッドの引数に追加したい文字を設定します。
サンプル（prepend/01.html）を開いてbody要素内にspan要素が1つあることを確認してください。 

<span>world!</span>

jQueryは以下の様に記述され、buttonをクリックするとspan要素の前に文字（Hello）を追加します。 

$("button").click(function(){
	$("span").prepend("Hello ");
})

結果として、buttonをクリックするとworld!の前にhelloの文字が追加され「Hello world!」となります。
span要素にはcssの設定で青背景に白文字と設定されていますが、追加された「Hello」の文字はspan要素の内なので、span要素のcss設定にはなります。span要素の外に追加したい場合はbeforeメソッドを利用します。
→参考：beforeのサンプル（before/01.html）

html要素を追加

html要素を追加したい場合は、prependメソッドの引数にhtml要素のタグを設定します。
サンプル（prepend/02.html）を開いてbody内にtargetのクラス属性を持ったdiv要素が1つあることを確認してください。このdiv要素内には、追加される要素の位置を確認できるようにyellowのクラス属性を持つdiv要素を入れています。 

<div class="target"><div class="yellow"></div></div>

jQueryは以下の様に記述され、buttonをクリックするとクラス属性targetの要素内の最初にdiv要素を追加します。 

$("button").click(function(){
	$(".target").prepend("<div>");
})

結果として、buttonをクリックするとグレーのdiv要素内の最初（黄色いdiv要素の前）にdiv要素が追加されます。ver1.4以前はhtml要素のタグは閉じられている必要がありましたが、現在では閉じられていなくてもOKです。

htmlコンテンツを追加

htmlコンテンツ（タグ情報を含んだ文字）を追加することもできます。サンプル（prepend/03.html）を開いてbody内の構成がprepend/01.htmlと同じことを確認してください。jQueryは以下の様に記述され、buttonをクリックするとspan要素の前にb要素で囲んだ文字（world!）を追加します。 

$("button").click(function(){
	$("span").prepend("<b>Hello </b>");
})

結果として、prependをクリックするとworld!の前に太字のhelloが追加されます。

引数にjQueryオブジェクトを設定

サンプル（prepend/04.html）を開いてbody内の構成がprepend/02.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にprependメソッドの引数にmyObjが設定されています。myObjは2行目で設定されhtml要素のdivが設定されています。 

$("button").click(function(){
	var myObj = $("<div>");
	$("#origin").prepend(myObj);
})

結果としてサンプルprepend/02.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryでは要素を設定するのに負荷がかかるため、設定の回数をなるべく減らす必要があります。ですので、すでに要素を設定したjQueryオブジェクトを使いまわすことで負荷が減るのです。→参考：使い方「jQueryの高速化：jQueryはオブジェクトに記憶しておく」
今回はprependメソッドのために、わざわざjQueryオブジェクトを作成しているので高速化にはつながりません。

第2引数の利用

コンテンツをまとめて追加したい場合は、第２引数以降に設定します。サンプル（prepend/05.html）を開いてbody内の構成がprepend/02.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にprependメソッドの第2引数と第3引数にhtml要素が設定されています。 

$("button").click(function(){
	$(".target").prepend("<div class='pink'>", "<div class='green'>", "<div>");
})

結果として、buttonをクリックするとtargetのクラス属性を持つdiv要素内の最初にピンクのdiv要素と緑のdiv要素と青のdiv要素がまとめて追加されます。

引数にFunctionを設定

サンプル（prepend/06.html）を開いてhtml内にクラス属性targetのdiv要素が2つあることを確認して下さい。 

<div class="target"><div class="yellow"></div></div>
<div class="target"><div class="yellow"></div></div>

jQueryは以下の様に記述されprependの引数にfunctionの「prependFunc」が設定されています。 

$("button").click(function(){
	$(".origin").append(prependFunc);
})

prependメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数（インデックス番号）を受け取ります。これらの引数の値は｛｝内の処理で利用することができます。そして任意の処理の後で最終的に前に追加したい内容をreturnで返すようにします。

prependに設定するFunctionの構文
function 任意の名前(インデックス番号){
　任意の処理（2つの引数を利用可能）
　return 追加したい内容;
}

サンプルprepend/06.htmlで利用したprependFuncは以下の様になっており、index番号が0だったら、pinkのクラス属性がついたdiv要素を追加し、それ以外はgreenのクラス属性が付いたdiv要素を追加するようにします。 

function prependFunc(index){
	if (index == 0) {
		return "<div class='pink'>";
	}else{
		return "<div class='green'>";
	}
}

結果として、buttonをクリックすると最初のtargetのクラス属性があるdiv要素内の最初にピンクのdiv要素が追加され、次のtargetのクラス属性があるdiv要素内の最初に緑のdiv要素が追加されます。

関連項目

コンテンツを引数でなく主語として設定したい場合はprependToメソッドを利用します。
子要素内で最後に追加したい場合はappendメソッドを利用します。
子要素ではなく兄弟要素としてコンテンツを前に追加したい場合はbeforeメソッドを利用します。

メモ

追加に関連するメソッド

コンテンツを追加するメソッドは数が多く、混乱しやすいので図にしてみました。

prependメソッドには機能は同じでも構文が異なるprependToメソッドがあります。
英文の意味から機能の違いを覚えると良いでしょう。