デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

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

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

構文

コンテンツを引数で指定した子要素の先頭に追加返値:jQueryオブジェクト
コンテンツ.prependTo( セレクタ/jQo )ver1.0〜
コンテンツはjQueryオブジェクトにしなければなりません。

機能

jQueryオブジェクトで指定したコンテンツを引数で指定した子要素の先頭に追加します。引数にはセレクタの他にjQueryオブジェクトが設定できます。

prependメソッドとは主語と述語が入れ替わった構文ですが、prependToメソッドでは次の機能が利用できません。「文字だけの追加はできない」「複数の要素をまとめて追加できない」「functionを設定できない」

解説

html要素を追加

サンプル(prependTo/01.html)を開いてbody要素内にspan要素が1つあることを確認してください。

<span> world!</span>

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

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

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

文字のみの要素は追加できません

prependメソッドは文字だけのコンテンツを追加することができますが、prependToはできません。サンプル(prependTo/01b.html)を開いてbody内の構成がprependTo/01.htmlと同じ事を確認してください。jQueryもほとんど同じで、以下の様に追加するコンテンツからb要素を外して文字だけにしただけです。

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

結果として、buttonをクリックしても何も追加されません。文字だけを追加したい場合はprependメソッドを利用しましょう。

html要素を追加

サンプル(prependTo/02.html)を開いてbody内にtargetのクラス属性を持ったdiv要素があることを確認してください。このdiv要素内には、追加される要素の位置を確認できるようにyellowのクラス属性を持つdiv要素を入れています。

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

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

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

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

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

サンプル(prependTo/03.html)を開いてbody内の構成がprependTo/02.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にprependToメソッドの引数にmyObjが設定されています。myObjは2行目で設定されtargetのクラス属性を持つ要素が設定されています。

$("button").click(function(){
	var myObj = $(".target");
	$("<div>").prependTo(myObj);
})

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

関連項目

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

メモ

追加に関連するメソッド

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

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