initial commit

1 files changed, 133 insertions, 0 deletions

diff --git a/files/fr/web/api/node/replacechild/index.html b/files/fr/web/api/node/replacechild/index.html
new file mode 100644
index 0000000000..2233bbd419
--- /dev/null
+++ b/files/fr/web/api/node/replacechild/index.html
@@ -0,0 +1,133 @@
+---
+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>