Node.replaceChild

概要

指定ノードの子ノードを別のノードに置き換えます。

構文

replacedNode = parentNode.replaceChild(newChild, oldChild);
  • newChild : oldChild を置き換える新しいノード(既存のノードは先に取り除かれます)
  • oldChild : newChild に置き換えるノード
  • 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> 

仕様書

関連情報

ドキュメントのタグと貢献者

Contributors to this page: fscholz, xuancanh, ethertank, Ryotakano
最終更新者: xuancanh,