---
title: Node.replaceChild
slug: Web/API/Node/replaceChild
tags:
  - API
  - DOM
  - DOM Elements Method
  - Gecko
  - Method
  - Node
translation_of: Web/API/Node/replaceChild
original_slug: Web/API/Node.replaceChild
---
<div>
 {{ApiRef}}</div>
<h2 id="Summary">Аннотация</h2>
<p>Заменяет дочерний элемент на выбранный. Возвращает заменённый элемент.</p>
<h2 id="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
</pre>
<ul>
 <li><code>newChild</code> элемент на который будет заменён <code>oldChild</code>. В случает если он уже есть в DOM, то сначала он будет удалён.</li>
 <li><code>oldChild</code> элемент который будет заменён.</li>
 <li><code>replacedNode</code> заменённый элемент. Тоже самое что и <code>oldChild</code>.</li>
</ul>
<h2 id="Example">Пример</h2>
<pre class="brush:js">// &lt;div&gt;
//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
// &lt;/div&gt;

// Создаём новый пустой элемент
// without an ID, any attributes, or any content
var sp1 = document.createElement("span");

// Присваиваем ему id 'newSpan'
sp1.setAttribute("id", "newSpan");

// Создаём строку.
var sp1_content = document.createTextNode("new replacement span element.");

// Добавляем контент в созданный нами узел
sp1.appendChild(sp1_content);

// создаём ссылку на существующий элемент который будем заменять
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// заменяем существующий элемент sp2 на созданный нами sp1
parentDiv.replaceChild(sp1, sp2);

// Результат:
// &lt;div&gt;
//   &lt;span id="newSpan"&gt;new replacement span element.&lt;/span&gt;
// &lt;/div&gt;
</pre>
<h2 id="Specification">Спецификация</h2>
<ul>
 <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
 <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
 <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
</ul>
<h2 id="See_also">Смотрите также</h2>
<ul>
 <li>{{domxref("Node.removeChild")}}</li>
</ul>