特定の要素の子ノードを、別の要素と置き換えます。

文法

replacedNode = parentNode.replaceChild(newChild, oldChild);

例

// <div>
//  <span id="childSpan">foo bar</span>
// </div>


// ID、属性、内容が無い、空の要素ノードを作成します。
var sp1 = document.createElement("span");

// 'newSpan'のID属性を割り当てます。
sp1.setAttribute("id", "newSpan");

// 上記の要素のための、内容(テキストノード)を作成します。
var sp1_content = document.createTextNode("new replacement span element.");

// 要素に作成した内容を適用します。
sp1.appendChild(sp1_content);

// 置き換えが行われる既存のノードへの参照を作成します。
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// 既存のノードであるsp2を、
// 新しいspan要素であるsp1と置き換えます。
parentDiv.replaceChild(sp1, sp2);


// 結果:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div>

注意事項

• DOM Level 1 Core: replaceChild
• DOM Level 2 Core: replaceChild
• DOM Level 3 Core: replaceChild

仕様

• Node.removeChild

 Back to top