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() の定義
現行の標準 初期定義

ブラウザー実装状況

BCD tables only load in the browser

関連情報