We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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> 

仕様書

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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

関連情報

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

このページの貢献者: Uemmra3, fscholz, xuancanh, ethertank, Ryotakano
最終更新者: Uemmra3,