Node.replaceChild

Node.replaceChild() メソッドは指定ノードの子ノードを別のノードに置き換えます。

replacedNode = parentNode.replaceChild(newChild, oldChild);

• newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
• oldChild : 置き換えられる既存ノード
• replacedNode : 置き換えられたノード（oldChild と同じノード）

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

// ID も属性も内容も持たない空要素を生成
var sp1 = document.createElement("span");

// 生成したノードに id 属性 'newSpan' を付与
sp1.setAttribute("id", "newSpan");

// テキストノードを生成
var sp1_content = document.createTextNode("新しい span 要素");

// 生成したテキストノードを先の空要素の子ノードとして配置
sp1.appendChild(sp1_content);

// 置換に先んじ、参照を代入
var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
var parentDiv = sp2.parentNode; // 置換対象ノードの親要素

// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
parentDiv.replaceChild(sp1, sp2);


// 上記コード実行後のノードは以下の様になります:
// <div>
//   <span id="newSpan">新しい span 要素</span>
// </div>

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

• Node.removeChild