Node: replaceChild() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
replaceChild() は Node インターフェイスのメソッドで、この（親）ノードの中の子ノードを置き換えます。
構文
js
replaceChild(newChild, oldChild) 引数
newChild-
oldChildを置き換える新しいノードです。警告: 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。
oldChild-
置き換えられる子ノードです。
メモ: 引数の順序で、新しいものの前に古いものが来るのは異例です。 Element.replaceWith() は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。
返値
置き換えられた Node です。これは oldChild と同じノードです。
例外
HierarchyRequestErrorDOMException-
DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。
oldChildの親がDocument,DocumentFragment,Elementのいずれにもならない場合。oldChildをnewChildで置き換えると循環参照になる場合。すなわちnewChildがこのノードの祖先である場合。newChildがDocumentFragment,DocumentType,Element,CharacterDataのいずれでもない場合。- 現在のノードが
Textであり、親ノードがDocumentになる場合。 - 現在のノードが
DocumentTypeであり、その親がDocumentにならない場合。 doctype は常に document の直下になければならないからです。 - このノードの親が
DocumentでnewChildがDocumentFragmentであり、複数のElementの子、またはTextの子がある場合。 oldChildをnewChildで置き換えると、Documentの子のElementが複数になる場合。oldChildをnewChildで置き換えると、ElementノードがDocumentTypeの前になる場合。
NotFoundErrorDOMException-
oldChildの親ノードが現在のノードではない場合に発生します。
例
js
// 前提: // <div> // <span id="childSpan">foo bar</span> // </div> // ID も属性も内容も持たない空要素を生成 const sp1 = document.createElement("span"); // 生成したノードに id 属性 'newSpan' を付与 sp1.id = "newSpan"; // 新しい要素にいくらかの内容を作成 const sp1_content = document.createTextNode("新しい置換 span 要素"); // その内容を新しい要素に適用 sp1.appendChild(sp1_content); // 置き換えられる既存のノードの参照を作る const sp2 = document.getElementById("childSpan"); const parentDiv = sp2.parentNode; // 既存のノード sp2 を新しい span 要素 sp1 で置換 parentDiv.replaceChild(sp1, sp2); // 結果: // <div> // <span id="newSpan">新しい置換 span 要素</span> // </div> 仕様書
| Specification |
|---|
| DOM # dom-node-replacechild |