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

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

.insertBefore( )コンテンツを前に追加

構文

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

機能

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

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

解説

html要素を追加

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

<span> world!</span>

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

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

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

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

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

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

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

html要素を追加

サンプル(insertBefore/02.html)を開いてbody内のにid属性originのdiv要素がある事を確認してください。

<div id="origin"></div>

jQueryは以下の様に記述され、buttonをクリックするとoriginのid属性を持つ要素の前にdiv要素を追加します。ver1.4以前はhtml要素のタグは閉じられている必要がありましたが、現在では閉じられていなくてもOKです。

$("button").click(function(){
	$("<div>").insertBefore("#origin");
})

結果として、buttonをクリックすると黄色い(originのid属性を持つ)div要素の前にdiv要素が追加されます。

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

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

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

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

関連項目

コンテンツを後に追加したい場合はinsertAfterメソッドを利用します。
子要素内で前に追加したい場合はprependToメソッドを利用します。
コンテンツを引数で設定したい場合はbeforeメソッドを利用します。

メモ

追加に関連するメソッド

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

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