)ver1.4〜コンテンツには文字の他、html要素やDOM要素、jQueryオブジェクトが設定できます。機能jQueryオブジェクトで指定した要素の後に引数で指定したコンテンツを追加します。コンテンツには文字の他、html要素やDOM要素、jQueryオブジェクトが設定できます。第2引数「コンテンツ2」を設定することで複数のコンテンツを追加することができます。ver1.4からは引数にfunctionを指定することも可能で、条件によって追加する内容を変更するなど高度な処理にも対応できます。文字を追加したい場合は、afterメソッドの引数に追加したい文字を設定します。サンプル(after/01.html)を開いてbody要素内にspan要素が1つあることを確認してください。</span>jQueryは以下の様に記述され、buttonをクリックするとspan要素の後に文字(world!)を追加します。world!」となります。span要素にはcssの設定で青背景に白文字と設定されていますが、追加された「world!」の文字はspan要素の外なので、span要素のcss設定にはなりません。appendメソッドを利用します。→参考:appendのサンプル(append/01.html)html要素を追加html要素を追加したい場合は、afterメソッドの引数にhtml要素のタグを設定します。サンプル(after/02.html)を開いてbody内にoriginのid属性を持ったdiv要素が1つあることを確認してください。id="origin"></div>jQueryは以下の様に記述され、buttonをクリックするとid属性がoriginの要素の後にdiv要素を追加します。$("button").click(function(){$("#origin").after("<div>");})結果として、buttonをクリックすると黄色い(originのid属性を持った)div要素の後にdiv要素が追加されます。ver1.4以前はhtml要素のタグは閉じられている必要がありましたが、現在では閉じられていなくてもOKです。htmlコンテンツを追加htmlコンテンツ(タグ情報を含んだ文字)を追加することもできます。サンプル(after/03.html)を開いてbody内の構成がafter/01.htmlと同じことを確認してください。jQueryは以下の様に記述され、buttonをクリックするとspan要素の後にb要素で囲んだ文字(world!)を追加します。$("button").click(function(){$("span").after("<b>world!</b>");})結果として、buttonをクリックするとhelloの後に太字のworld!が追加されます。引数にjQueryオブジェクトを設定サンプル(after/04.html)を開いてbody内の構成がafter/02.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にafterメソッドの引数にmyObjが設定されています。myObjは2行目で設定されhtml要素のdivが設定されています。$("<div>");$("#origin").after(myObj);})結果としてサンプルafter/02.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryでは要素を設定するのに負荷がかかるため、設定の回数をなるべく減らす必要があります。要素を設定したjQueryオブジェクトを使いまわすことで負荷が減るのです。今回のサンプルではafterメソッドのために、わざわざjQueryオブジェクトを作成しているので高速化にはつながりません。第2引数の利用コンテンツをまとめて追加したい場合は、第2引数以降に設定します。サンプル(after/05.html)を開いてbody内の構成がafter/02.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にafterメソッドの第2引数と第3引数にhtml要素が設定されています。"<div>");})結果として、buttonをクリックすると黄色い(originのid属性を持つ)div要素の後にピンクのdiv要素と緑のdiv要素と青のdiv要素がまとめて追加されます。引数にFunctionを設定サンプル(after/06.html)を開いてbody内にクラス属性originのdiv要素が2つあることを確認して下さい。class="origin"></div>jQueryは以下の様に記述されafterの引数にfunctionの「afterFunc」が設定されています。$("button").click(function(){$(".origin").after(afterFunc);})afterメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(インデックス番号)を受け取ります。これらの引数の値は{}内の処理で利用することができます。任意の処理の後で最終的に後に追加したい内容をreturnで返すようにします。追加したい内容;}サンプルafter/06.htmlで利用したafterFuncは以下の様になっており、index番号が0だったら、pinkのクラス属性がついたdiv要素を追加し、それ以外はgreenのクラス属性が付いたdiv要素を追加するようにします。class='green'>";}}結果として、buttonをクリックすると最初の黄色い(originのクラス属性を持つ)div要素の後にはピンクのdiv要素が追加され、次の黄色いdiv要素の後には緑のdiv要素が追加されます。beforeメソッドを利用します。insertAfterメソッドを利用します。appendメソッドを利用します。メモ追加に関連するメソッドコンテンツを追加するメソッドは数が多く、混乱しやすいので図にしてみました。insertAfterメソッドがあります。英文の意味から機能の違いを覚えると良いでしょう。v1.9での仕様変更ドキュメント内に存在しない要素(つまり新規に作成した要素)に対しafterメソッドで要素を追加した場合、返されるjQueryオブジェクトには追加した要素を含まなくなりました。v1.8の動作を確認します、サンプル(after/test01.html)を開いてjQueryを確認して下さい。jQuery(html)を利用して新規にdiv要素を作成しています。4行目ではbuttonがクリックされた際に、作成した要素に対しafterメソッドでb要素を追加しています。appendToメソッドを利用してbody内に表示します。newElem.after("<b>world!</b>");myObject.appendTo("body");})buttonをクリックすると新規に作成したdiv要素も、追加したb要素もbody内に表示されます(div要素は青い矩形で表示されるようにcssで設定されています)。続いてサンプル(after/test01b.html)を開いてjQueryのバージョンが1.9.0に変更されている以外はafter/test01.htmlと同じ事を確認して下さい。src="../../../css_js/jquery-1.9.0.min.js"></script>このサンプルではbuttonをクリックしてもafterメソッドで追加したb要素は表示されません。これは仕様変更によって、新規に作成した要素に対しafterメソッドで要素を追加した時に返されるjQueryオブジェクトに追加した要素が含まれなくなったためです。)があるため修正されたようです。