.replaceWith()【要素 置換 (コンテンツ指定)】

メモ

  • 該当要素を指定コンテンツで置換
    • 戻り値の jQueryオブジェクト は、置換(削除)された元の要素
    • コンテンツにドキュメント内の要素を指定した場合、移動
    • jQuery 1.9 より前：先頭のコンテンツがドキュメントと独立している場合、 変更された新しい jQueryオブジェクト を返却
    • 削除された元の要素のデータ・イベントハンドラも削除
  • 関連

構文

説明構文戻り値
要素 置換 (コンテンツ指定) .replaceWith( newContent ) 1.2

htmlString  | Element  | Array  | jQuery newContent：置換コンテンツ
jQuery
.replaceWith( function ) 1.4

handler：イベントハンドラ
引数説明
なし
(this)処理中DOM要素
戻り値説明
htmlString
Element
Array
jQuery
※ 仕様書に記述無し 		置換コンテンツ
jQuery

関連

例

<style>
.border { border:1px black solid; padding:5px 5px; line-height:225%; }
.border2 { border:2px red dashed; padding:1px 5px; }
.color1 { color:red; }
.bold { font-weight:bold; }
</style>

<span id="id0" class="bold border2">(jQuery [id0])</span>
<p><span id="idX" class="border2">(Element [idX])</span></p>

<p><span id="id1" class="border">[id1]</span></p>
<p><span id="id2" class="border">[id2]</span></p>
<p><span id="id3" class="border">[id3]</span></p>
<p><span id="id4" class="border">[id4]</span></p>

<p><span id="id10" class="border2">(Element [id10])</span></p>
<p><span id="id11" class="border2">(Element [id11])</span></p>
<p><span id="id12" class="border2">(Element [id12])</span></p>

<p><span class="class1 border">[class1]-1</span></p>
<p><span class="class1 border">[class1]-2</span></p>
<p><span class="class1 border">[class1]-3</span></p>

<script>
$("#id1").replaceWith( "<span class='border2'>(htmlString)</span>" );

var elm = document.getElementById("idX");
$("#id2").replaceWith( elm );

var elms = Array(3);
for (var i = 0; i < 3; i++) {
  elms[i] = document.getElementById("id1" + i);
}
$("#id3").replaceWith( elms );

$("#id4").replaceWith( $("#id0") );

$(".class1").replaceWith( function() {
  return "<span class='border2 color1'><i>" + $(this).html() + "</i></span>";
});
</script>
(jQuery [id0])

(Element [idX])

[id1]

[id2]

[id3]

[id4]

(Element [id10])

(Element [id11])

(Element [id12])

[class1]-1

[class1]-2

[class1]-3