---
title: document.importNode
slug: Web/API/Document/importNode
tags:
  - API
  - Copie
  - Document
  - Méthodes
  - Noeud
  - Reference
translation_of: Web/API/Document/importNode
---
<p>{{APIRef("DOM")}}</p>

<p><span id="result_box" lang="fr"><span>La méthode {{domxref ("Document")}} <code>importNode()</code> crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse</span> <span>être inséré dans le document actuel.</span> <span>Il n'est pas encore inclus dans l'arbre des documents;</span> <span>Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.</span></span></p>

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

<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
</pre>

<dl>
 <dt><code>externalNode</code></dt>
 <dd>Le nouveau <code>Node</code> ou <code>DocumentFragment</code> à importer dans le document courant. Après l'importation, le nouveau <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/parentNode" title="DOM/Node.parentNode">parentNode</a></code> du noeud est <code>null</code>, <span id="result_box" lang="fr"><span>car il n'a pas encore été inséré dans l'arborescence du document.</span></span></dd>
 <dt><code>deep</code></dt>
 <dd>Une valeur booléenne <span id="result_box" lang="fr"><span>qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de <code>externalNode</code>.</span> <span>Si ce paramètre est <code>true</code> (<em>vrai</em>), alors <code>externalNode</code> et tous ses descendants sont copiés;</span> <span>si <code>false</code> <em>(faux)</em>, seul le nœud unique, <code>externalNode</code>, est importé.</span></span></dd>
</dl>

<div class="note">
<p><strong>Note :</strong> Dans la spécification DOM4, <span id="result_box" lang="fr"><span><code>deep</code> est répertorié en tant qu'argument facultatif.</span> <span>S'il est omis, la méthode agit comme si la valeur de <code>deep</code> était <code>true</code>, par défaut, elle utilisait le clonage profond comme comportement par défaut.</span> <span>Pour créer un clone superficiel, la profondeur doit être définie sur <code>false</code>.</span><br>
 <br>
 <span>Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de <code>deep</code> était <code>false</code>.</span> <span>Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> à la fois pour la compatibilité en amont et en aval.</span> <span>Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument.</span> <span>À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</span></span></p>
</div>

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

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"iframe"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> oldNode <span class="operator token">=</span> iframe<span class="punctuation token">.</span>contentWindow<span class="punctuation token">.</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myNode"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> newNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">importNode</span><span class="punctuation token">(</span>oldNode<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"container"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newNode<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

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

<p><span id="result_box" lang="fr"><span>Le noeud d'origine n'est pas supprimé du document d'origine.</span> <span>Le noeud importé est un clone de l'original.</span></span></p>

<p> </p>

<p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de <a href="/fr/docs/Web/API/Node/ownerDocument" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p>

<p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</p>

<p> </p>

<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
   <td>{{Spec2("DOM2 Core")}}</td>
   <td>Définition initiale</td>
  </tr>
 </tbody>
</table>

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

<div>


<p>{{Compat("api.Document.importNode")}}  </p>
</div>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{domxref("document.adoptNode()")}}</li>
 <li>{{domxref("Node.appendChild()")}}</li>
 <li>{{domxref("Node.insertBefore()")}}</li>
</ul>

<p> </p>