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>
仕様書
ブラウザ実装状況
現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。
この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。
手助けしていただける場合は、こちらから!
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
基本サポート | 1.0 | 1.0 (1.7 or earlier) | IE6 (Maybe Earlier) | (有) | 1.0 | (有) |
機能 | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Edge Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
基本サポート | (有) | 1.0 (1) | IE6 (Maybe Earlier) | (有) | 1.0 | (有) | 1.0 |