---
title: element.replaceChild
slug: Web/API/Node/replaceChild
tags:
  - API
  - DOM
  - Enfant
  - Méthodes
  - Noeuds
  - Remplacement
translation_of: Web/API/Node/replaceChild
---
<p>{{APIRef("DOM")}}</p>

<p>La méthode <strong><code>Node.replaceChild()</code></strong> remplace un nœud enfant du noeud spécifié par un autre nœud.</p>

<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
</pre>

<ul>
 <li><code>newChild</code> est le nouveau nœud qui remplacera <code>oldChild</code>. S'il existe déjà dans le DOM, il sera d'abord enlevé.</li>
 <li><code>oldChild</code> est le nœud existant à remplacer.</li>
 <li><code>replaceNode</code> est le nœud remplacé. C'est le même nœud que <code>oldChild</code>.</li>
</ul>

<h2 id="Exemple" name="Exemple">Exemple</h2>

<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// &lt;div&gt;</span>
<span class="comment token">//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;</span>
<span class="comment token">// &lt;/div&gt;</span>

<span class="comment token">// crée un noeud élément vide</span>
<span class="comment token">// sans ID, aucun attribut ni contenu</span>
<span class="keyword token">var</span> sp1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// lui donne un attribut id appelé 'newSpan'</span>
sp1<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">"newSpan"</span><span class="punctuation token">;</span>

<span class="comment token">// crée un contenu pour le nouvel élément.</span>
<span class="keyword token">var</span> sp1_content <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"new replacement span element."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// applique ce contenu au nouvel élément</span>
sp1<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>sp1_content<span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// construit une référence au noeud existant devant être remplacé</span>
<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childSpan"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> sp2<span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span>

<span class="comment token">// remplace le noeud existant sp2 avec le nouvel élément span sp1</span>
parentDiv<span class="punctuation token">.</span><span class="function token">replaceChild</span><span class="punctuation token">(</span>sp1<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// résultat :</span>
<span class="comment token">// &lt;div&gt;</span>
<span class="comment token">//   &lt;span id="newSpan"&gt;nouvel élément span de remplacement.&lt;/span&gt;</span>
<span class="comment token">// &lt;/div&gt;</span></code></pre>

<div> </div>

<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</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 class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core : replaceChild</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-785887307">traduction en français</a> (non normative)</small></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>

<p> </p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Edge</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(1.0)}}</td>
   <td>{{CompatGeckoDesktop(1)}}</td>
   <td>    IE6 (Maybe Earlier)</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatOpera(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Edge Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1)}}</td>
   <td>IE6 (Maybe Earlier)</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatOperaMobile(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatChrome(1.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Voir aussi</h2>

<ul>
 <li>{{domxref("Node.removeChild")}}</li>
</ul>

<p> </p>