---
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>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 ê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 {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.</p>

<h3 id="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="/fr/docs/Web/API/Node/parentNode">parentNode</a></code> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document.</dd>
 <dt><code>deep</code></dt>
 <dd>Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de <code>externalNode</code>. Si ce paramètre est <code>true</code> (<em>vrai</em>), alors <code>externalNode</code> et tous ses descendants sont copiés; si <code>false</code> <em>(faux)</em>, seul le nœud unique, <code>externalNode</code>, est importé.</dd>
</dl>

<div class="note">
<p><strong>Note :</strong> Dans la spécification DOM4, <code>deep</code> est répertorié en tant qu'argument facultatif. 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. Pour créer un clone superficiel, la profondeur doit être définie sur <code>false</code>.<br>
 <br>
 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>. 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. Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</p>
</div>

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

<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);</pre>

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

<p>Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.</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"><code>document.importNode()</code></a> (ou adoptés avec <a href="/fr/docs/Web/API/Document/adoptNode"><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"><code>Node.ownerDocument</code></a>, consultez la <a 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"><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode"><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 href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener">bug 47903</a>.</p>

<p> </p>

<h2 id="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>