)ver1.4〜機能jQueryオブジェクトで指定した要素と引数で指定したhtml要素を置き換え。html要素がすでにhtml上に存在している場合は、指定した対象がhtml要素に上書きされるような結果になります(ですので「入れ換え」ではなく「置き換え」と表現しました)。引数で指定した対象と置き換えますサンプル(replaceWith/01.html)を開いてbody内にbutton要素が1つしかないことを確認してください。<button>CLICK</button>jQueryは以下の様に記述され、buttonをクリックするとbutton要素がdiv要素に置き換わります。$("button").click(function(){$("button").replaceWith("<div>");})結果として、buttonをクリックするとbuttonが消え、代わりにdiv要素が表示されます。htmlコンテンツでもOKですサンプルreplaceWith/01ではdivタグと置き換えましたが、より複雑なhtmlコンテンツとも置き換えることができます。サンプル(replaceWith/02.html)を開いてbody内の構成はreplaceWith/01.htmlと同じ事を確認してください。jQueryもほとんど同じなのですが、以下の様にdivタグだけでなくi要素を含むテキストも設定しています。$("button").click(function(){$("button").replaceWith("<div><i>div要素</i></div>");})結果として、buttonをクリックするとbutton要素が斜体でdiv要素と書かれたdiv要素と置き換わります。引数にjQueryオブジェクトを利用replaceWithメソッドはjQueryオブジェクトを利用することで、すでにhtml上に存在する要素と引数で指定した要素を置き換えることができます。このときhtml上に存在していた要素は削除されるため、機能的には対象を上書きするような形となります。サンプル(replaceWith/03.html)を開いてbody内にul要素と3つのli要素があることを確認してください。li要素にはそれぞれfirst,second,thirdとクラス属性が設定されています。class="third">third</li></ul>jQueryには以下のように記述され、buttonをクリックするとfirstのクラス属性を持つ要素をmyObjで上書きします。変数myObjは2行目で作成されたthirdのクラス属性を持つ要素です。$(".third");$(".first").replaceWith(myObj);})結果として、buttonをクリックするとfirstのli要素をthirdのli要素が上書きします。位置が入れ換わるのではなく上書きになることに注意してください。replaceAllメソッドでは引数にjQueryオブジェクトを設定しなくても機能しましたが、replaceWithメソッドでは機能しません。ページ最下段の「メモ」で説明があります。引数にFunctionを設定サンプル(replaceWith/04.html)を開いてbody内にquesのクラス属性がついたspan要素が3つあることを確認して下さい。class="ques">?</span></p>jQueryは以下の様に記述されreplaceWithの引数にfunctionの「replaceFunc」が設定されています。$("button").click(function(){$(".ques").replaceWith(replaceFunc);})replaceWithメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(インデックス番号)を受け取ります。これらの引数の値は{}内の処理で利用することができます。任意の処理の後で最終的に置き換える内容をreturnで返すようにします。置き換える内容;}サンプルreplaceWith/04.htmlで利用したreplaceFuncは以下の様になっており、index番号が0だったらApple、1だったらOrange、2だったらBananaのテキスト内容を持ったspan要素と入れ換えます。class='ans'>Banana</span>";}}結果として、buttonをクリックすると?と記述されたspan要素が、解答の書かれたspan要素に置き換わります。replaceAllメソッドを利用します。以下の様に「追加する対象」と「内容」が入れ替わった構文になっています。replaceAllメソッドは引数にfunctionを設定することはできません。メモreplaceAllのような設定はできないサンプル(replaceWith/03.html)で引数にjQueryオブジェクトを利用せずに、以下の様にテキストを設定したサンプルを用意しました。→参考:サンプル(replaceWith/test01.html)$("button").click(function(){$(".first").replaceWith(".third");})この場合、引数に設定された「.third」はテキストとして扱われ、firstのクラス属性の要素が「.third」というテキストと入れ替わります。replaceAllメソッドではサンプル(replaceAll/03.html)のようにjQueryオブジェクトでなくとも機能しています。$("button").click(function(){$(".first").replaceAll(".third");})本家のサイトのサンプルでは、replaceAllの場合はjQueryオブジェクトは利用せず、replaceWithでは利用している事から、これが仕様なのでしょう。本家サイトのサンプルに興味深いサンプルがあったので、ここにメモしておきます。button要素をクリックすると、button要素の内容はそのままに、button要素をdiv要素に置き換えるサンプルです。同じではつまらないので、htmlコンテンツを維持するサンプルとして作成してみました。htmlメソッドを利用して取得し、divタグで置き換える際に利用します。その結果、buttonをクリックするとbutton要素の内容(i要素付きのテキスト)を維持しつつdiv要素に置き換えることができます。クリックで答え合わせサンプルreplaceWith/04.htmlではbuttonをクリックすると、すべての回答が一度に表示されました。これを各?のspan要素をクリックした際に個別に入れ換えるサンプルに作りかえました。ポイントは回答をspan要素の属性値(サンプルではans)として設定しておくことです。attrメソッドを利用して取得し、その値で置き換えます。class='ans'>"+myAns+"</span>";}v1.9での仕様変更ドキュメント内に存在しない要素(つまり新規に作成した要素)に対しreplaceWithメソッドで要素を置き換えたた場合、返されるjQueryオブジェクトには入れ換える前の要素になりました。v1.8の動作を確認します、サンプル(replaceWith/test04.html)を開いてjQueryを確認して下さい。jQuery(html)を利用して新規にspan要素を作成しています。4行目ではbuttonがクリックされた際に、作成した要素に対しreplaceWithメソッドでdiv要素と置き換えています。appendToメソッドを利用してbody内に表示します。newElem.replaceWith("<div>");myObject.appendTo("body");})buttonをクリックすると赤い矩形が表示されます。css設定によってdiv要素は赤く表示するようにしてあるので、このサンプルではdiv要素が表示されています。続いてサンプル(replaceWith/test04b.html)を開いてjQueryのバージョンが1.9.0に変更されている以外はreplaceWith/test04.htmlと同じ事を確認して下さい。src="../../../css_js/jquery-1.9.0.min.js"></script>このサンプルではbuttonをクリックすると青い矩形が表示されます。css設定によってspan要素は青く表示するようにしてあるので、このサンプルではspan要素が表示されています。replaceWithメソッドで入れ換える前の状態で表示されます。これは仕様変更によって、新規に作成した要素に対しreplaceWithメソッドで要素を入れ換えた時に返されるjQueryオブジェクトは置き換えが反映されなくなったためです。)があるため修正されたようです。