---
title: ChildNode.replaceWith()
slug: Web/API/ChildNode/replaceWith
translation_of: Web/API/ChildNode/replaceWith
---
<div>{{APIRef("DOM")}}</div>

<p>Метод <code><strong>ChildNode.replaceWith()</strong></code> заменяет <code>ChildNode</code> в списке детей их родителя множеством {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} объекты вставляются как эквивалент нод {{domxref("Text")}}.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox notranslate">[Throws, Unscopable]
void ChildNode.replaceWith((Node or DOMString)... nodes);
</pre>

<h3 id="Параметры">Параметры</h3>

<dl>
 <dt><code>nodes</code></dt>
 <dd>Множество заменяемых {{domxref("Node")}} или {{domxref("DOMString")}} объектов.</dd>
</dl>

<h3 id="Исключения">Исключения</h3>

<ul>
 <li>{{domxref("HierarchyRequestError")}}: <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Нода не может быть вставлена в указанную точку иерархии.</span></span></span></li>
</ul>

<h2 id="Примеры">Примеры</h2>

<h3 id="Использование_replaceWith">Использование <code>replaceWith()</code></h3>

<pre class="brush: js notranslate">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);
// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
</pre>

<h3 id="ChildNode.replaceWith_не_выполним"><code>ChildNode.replaceWith()</code> не выполним</h3>

<p>Метод <code>replaceWith()</code> не входит в область видимости оператора <code>with</code>. Смотрите {{jsxref("Symbol.unscopables")}} для дополнительной информации.</p>

<pre class="brush: js notranslate">with(node) {
  replaceWith("foo");
}
// ReferenceError: replaceWith is not defined </pre>

<h2 id="Полифил">Полифил</h2>

<p>Вы можете заполнить метод <code>replaceWith()</code> в Internet Explorer 10+ и выше следующим кодом:</p>

<pre class="brush: js notranslate">function ReplaceWithPolyfill() {
  'use-strict'; // For safari, and IE &gt; 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;</pre>

<h2 id="Спецификация">Спецификация</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>



<p>{{Compat("api.ChildNode.replaceWith")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li>
 <li>{{domxref("Node.replaceChild()")}}</li>
 <li>{{domxref("NodeList")}}</li>
</ul>