)ver1.4〜機能jQueryオブジェクトで指定した要素に引数で指定した要素を追加します。引数にはDOM要素やjQueryオブジェクト、そしてhtmlなどを設定できます。ver1.4からは第2引数「コンテキスト」を設定して追加する要素の範囲を限定する事ができます。ver1.9では一部の機能が変更されました。詳細はページ最下部「メモ」の「v1.9での仕様変更」を確認して下さい。引数にセレクタを設定サンプル(add/01.html)を開いてdiv要素が3つ、span要素が1つあることを確認して下さい。cssメソッドにより背景色を薄緑にされます。そのままメソッドチェーンによってaddメソッドが実行され、span要素が追加されます。それらの要素(div要素とspan要素)にcssメソッドにより赤枠を表示します。#f00");})結果として、buttonをクリックするとdiv要素は背景が薄緑になり、div要素とspan要素に赤枠が表示されます。メソッドチェーンについては使い方の「stopメソッド(1):メソッドチェーン」を参考にしてください。処理の高速化が期待できます。引数にDOM要素を設定サンプル(add/02.html)を開いてbody内の構成がadd/01.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にaddメソッドの引数にmyElemが設定されています。myElemは1行目で設定され、最初のspan要素が設定されています。#f00");})myElemには最初のspanしか設定されていないため。buttonをクリックするとadd/01.htmlと異なり、2番目のspan要素には赤枠が表示されません。引数にhtmlを設定サンプル(add/03.html)を開いてbody内にbuttonしかないことを確認してください。jQueryは以下の様に記述され、最初に設定されたdiv要素(html要素)にaddメソッドでp要素(テキストノード付き)を追加しています。appendToメソッドによってbody内に追加します。$("button").click(function(){$("<div>").add("<p>p要素</p>").appendTo("body");})結果としてbuttonをクリックすると、button内にdiv要素とp要素(2つの要素ともcss設定により青い正方形として表示されます)が追加されます。引数にjQueryオブジェクトを設定サンプル(add/04.html)を開いてbody内の構成がadd/01.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にaddメソッドの引数にmyObjが設定されています。myObjは1行目で設定されspan要素にマッチするjQueryオブジェクトが代入されています。#f00");})結果としてサンプルadd/01.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryではマッチした要素を選択するのに負荷がかかるため、選択の回数をなるべく減らす必要があります。要素を選択したjQueryオブジェクトを使いまわすことで負荷が減るのです。今回のサンプルではaddメソッドのために、わざわざjQueryオブジェクトを作成しているので高速化にはつながりません。第2引数にコンテキストを設定addメソッドの第2引数にコンテキストを設定することで、追加する要素の範囲を限定する事ができます。サンプル(add/05.html)を開いてbody内の構成がadd/01.htmlとすこし異なり、下のspan要素がp要素に囲まれていることを同じ事を確認してください。<div>DIV</div><span>SPAN</span><div>DIV</div><p><span>SPAN</span></p><div>DIV</div>jQueryはサンプルadd/01.htmlとほとんど同じですが、以下の様にaddメソッドの第2引数にp要素がが設定されています。これによって追加されるspan要素はp要素内のものに限定されます。#f00");})結果としてaddメソッドでp要素に囲まれた下のspan要素しか追加されないため、buttonをクリックしても上のspan要素には赤枠が表示されません。notメソッドを利用します。メモ選択の回数を減らし高速化に寄与サンプルadd/01.htmlはaddメソッドを利用しなくても、サンプル(add/test01.html)のように2行に分けて書くことができます。#f00");})これは分かりやすいかもしれませんが、div要素の選択が2回(2行目と3行目で)行われるため負荷が多くなります。addメソッドを利用した方は、すでに選択されたdiv要素にspan要素を追加しているのでdiv要素の選択は1回だけとなり無駄がありません。addメソッドの注意点addメソッドは実行しただけではjQueryオブジェクトに要素を追加できません。サンプル(add/test02.html)のjQueryを確認してください。#f00");})上記3行目でaddメソッドでmyObj(div要素を選択したjQueryオブジェクト)にspan要素を追加し、4行目で赤枠を表示しようとしています。buttonをクリックしてもsapn要素に赤枠が表示されず、addメソッドによってmyObjの内容が変わっていないことが確認できます。これはjQueryに限らず一般的な注意点(返値を返すfunctionを、そのまま利用する等)なのですが、本家サイトに記載されていたのでメモしておきます。myObjに追加したいのであれば返値をmyObjに代入します。#f00");})そしてmyObjの内容は変えたくないけれど、spanに赤枠を付けたい場合はサンプル(add/test02c.html)のように書きます。#f00");myObj.css("background-color","#cfc");})4行目で派背景色を薄緑にしていますが、myObjはaddメソッドで変化していないため、div要素だけ背景色が変わります。第2引数にObjectオブジェクト本家サイトで、addメソッドの引数にhtmlを設定するサンプルが分かりにくかったので、いろいろ調査しました。その中で興味深い構文があったのでメモしておきます。サンプル(add/test03.html)では第2引数にObjectオブジェクトで追加する第1引数の属性を設定しています。本家サイトには記載がないのですが、問題なく機能しています。jQuery(html)の第2引数に属性を設定する構文と同じ仕組みだと思います。上記のサンプルではjQuery(html)の構文を利用して、div要素に対しても属性を設定しています。HTML上の並びに従う注意すべきなのはHTML上に配置済みの要素をaddメソッドで追加した場合は追加した順ではなくHTML上に配置されていた順番になる点です。サンプル(add/test04.html)を開きbody内のdiv要素のidを確認してください。上から順にtest01,test02,test03となっています。id="test03"></div>続いてjQueryを確認してください。以下の様にaddメソッドを利用してtest03を先頭にtest02,test01と表示している順番とは逆の順番に要素を追加しています。要素は変数jQoに代入しました。eachメソッドを利用して変数jQoに格納された順番で要素内にテキストを設定するようにしました。"+elem.id);}実際にbuttonをクリックするとaddメソッドで追加した順番(03→02→01)ではなく、HTML上に配置された順番(01→02→03)になることを確認してください。配置されていない要素はaddした順にHTML上に配置されていない要素を追加する場合は、addメソッドで追加した順になります。サンプル(add/test05.html)を開きbody内にdiv要素が無いことを確認してください。サンプルを開くとdiv要素が配置されています。これはjQueryで以下の様に記述されているためです。appendToメソッドを利用してbody内に表示しています。cssの設定によってid毎に異なる背景色が設定されていますが、色の並びをサンプル(add/test04.html)と比較して逆になっていることを確認してください(test04.htmlは薄い青が一番上、test05は薄い青が一番下)。セレクタエンジンの仕様HTML上に配置されているか否かで順番が変わるのはjQueryに搭載されているセレクタエンジン(Sizzle)の仕様です。nodes」はドキュメントに接続されたノードなので「配置された要素」という理解でよいと思います。nodes」は「(存在しているけど)配置されていない要素」になります。英文は「配置された要素はドキュメント順にソートされ、配置されていない要素はそれらの後になる」という感じです。ややこしいですが、配置された要素と配置されていない要素を持つサンプルで上記の確認をしてみましょう。サンプル(add/test06.html)を開きbody内にdiv要素が3つ配置されていることを確認してください。id="test03"></div>しかし実際にはdiv要素は2つしか表示されません。これはjQueryで以下の様に記述されているためです。removeメソッドを利用してidがtest02の要素をHTML上から外し(disconnected)て変数removeObjに保存しています。$("#test02").remove();続いてbuttonをクリックした時の処理を確認します。以下の2行目で削除した要素removeObjを2番目に追加しています。このサンプルではtest02の要素をHTML上から外しているためtest04.htmlのようにテキストを確認できないので6行目のように単純にアラートでidを表示するだけにしました。alert(elem.id)}実際にbuttonをクリックして表示されるidを確認してください。test01,test03,test02となったと思います。test01とtest02は配置されている要素なので配置された順番に表示され、test02は削除されたため配置されている要素の後にまわされたわけです。これで英文のとおりであることが確認できたと思います。