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

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

.append( )コンテンツを子要素の最後に追加

構文

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

機能

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

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

解説

文字を追加

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

<span>Hello </span>

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

$("button").click(function(){
	$("span").append("world!");
})

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

html要素を追加

html要素を追加したい場合は、appendメソッドの引数にhtml要素のタグを設定します。
サンプル(append/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").append("<div>");
})

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

htmlコンテンツを追加

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

$("button").click(function(){
	$("span").append("<b>world!</b>");
})

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

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

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

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

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

第2引数の利用

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

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

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

引数にFunctionを設定

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

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

jQueryは以下の様に記述されappendメソッドの引数にfunctionの「appendFunc」が設定されています。

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

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

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

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

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

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

関連項目

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

メモ

追加に関連するメソッド

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

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