ChildNode.replaceWith()

ChildNode.replaceWith() は親の子リストの ChildNode を、 Node または DOMString オブジェクトのセットに置換します。 DOMString オブジェクトは Text ノードと等価なノードとして挿入されます。

構文

[Throws, Unscopable] 
void ChildNode.replaceWith((Node or DOMString)... nodes);

パラメーター

nodes
Node または DOMString オブジェクトのセットで置換します。

例外

replaceWith() の使用

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");

child.replaceWith(span);

console.log(parent.outerHTML);
// "<div><span></span></div>"

ChildNode.replaceWith() はスコーピングに非対応

replaceWith() メソッドは with 文でのスコーピングに対応していません。詳細は Symbol.unscopables をご覧ください。

with(node) { 
  replaceWith("foo");
}
// ReferenceError: replaceWith is not defined 

ポリフィル

以下のポリフィルで、 Internet Explorer 9 以降でも replaceWith() メソッドが利用できます。

function ReplaceWithPolyfill() {
  'use-strict'; // For safari, and IE > 10
  var parent = this.parentNode, i = arguments.length, currentNode;
  if (!parent) return;
  if (!i) // if there are no arguments
    parent.removeChild(this);
  while (i--) { // i-- decrements i and returns the value of i before the decrement
    currentNode = arguments[i];
    if (typeof currentNode !== 'object'){
      currentNode = this.ownerDocument.createTextNode(currentNode);
    } else if (currentNode.parentNode){
      currentNode.parentNode.removeChild(currentNode);
    }
    // the value of "i" below is after the decrement
    if (!i) // if currentNode is the first argument (currentNode === arguments[0])
      parent.replaceChild(currentNode, this);
    else // if currentNode isn't the first
      parent.insertBefore(currentNode, this.nextSibling);
  }
}
if (!Element.prototype.replaceWith)
    Element.prototype.replaceWith = ReplaceWithPolyfill;
if (!CharacterData.prototype.replaceWith)
    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
if (!DocumentType.prototype.replaceWith) 
    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;

仕様

仕様書 策定状況 コメント
DOM
ChildNode.replacewith() の定義
現行の標準 初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
replaceWithChrome 完全対応 54Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 39Safari 完全対応 ありWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android 完全対応 49Opera Android 完全対応 41Safari iOS 完全対応 ありSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報