document.importNode

  • Revision slug: Web/API/document.importNode
  • Revision title: document.importNode
  • Revision id: 406283
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment

Revision Content

{{ DOMRef() }}

Summary

Creates a copy of a node from an external document that can be inserted into the current document.

Syntax

var node = document.importNode(externalNode, deep);
node
The new node that is imported into the document. The new node's parentNode is null, since it has not yet been inserted into the document tree.
externalNode
The node from another document to be imported.
deep {{ optional_inline() }}
A boolean, indicating whether the descendants of the imported node need to be imported.

Note: In the DOM4 specification (as implemented in Gecko 10.0 {{ geckoRelease("10.0") }}) deep is an optional argument. If omitted, the method acts as if the value of deep was true, i.e. deep cloning is the default behavior. If you want to use shallow cloning, you need to explicitly set this argument to false.

In browsers supporting previous versions of the DOM, you always need to provide this argument.

Example

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

Notes

The original node is not removed from the original document. The imported node is a clone of the original.

{{ page("/en-US/docs/DOM/WRONG_DOCUMENT_ERR_note" }}

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
DOM 2 version {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1") }} 9.0 9.0 {{ CompatVersionUnknown() }}
DOM 4 version
(deep optional)
{{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("10") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNightly("safari") }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
DOM 2 version {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
DOM 4 version
(deep optional)
{{ CompatUnknown() }} {{ CompatGeckoMobile("10") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specification

See also

  • {{ domxref("document.adoptNode()") }}

{{ languages( { "fr": "fr/DOM/document.importNode", "ja": "ja/DOM/document.importNode","pl": "pl/DOM/document.importNode","zh-cn": "zh-cn/DOM/document.importNode" } ) }}

Revision Source

<p>{{ DOMRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Creates a copy of a node from an external document that can be inserted into the current document.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
</pre>
<dl>
  <dt>
    <code>node</code></dt>
  <dd>
    The new node that is imported into the document. The new node's <code><a href="/en/DOM/Node.parentNode" title="En/DOM/Node.parentNode">parentNode</a></code> is <code>null</code>, since it has not yet been inserted into the document tree.</dd>
  <dt>
    <code>externalNode</code></dt>
  <dd>
    The node from another document to be imported.</dd>
  <dt>
    <code>deep</code> {{ optional_inline() }}</dt>
  <dd>
    A boolean, indicating whether the descendants of the imported node need to be imported.</dd>
</dl>
<div class="note">
  <p><strong>Note:</strong>&nbsp;In the DOM4 specification (as implemented in Gecko 10.0 {{ geckoRelease("10.0") }}) <code>deep</code> is an optional argument. If omitted, the method acts as if the value of <code>deep</code> was <code>true</code>, i.e. deep cloning is the default behavior. If you want to use shallow cloning, you need to explicitly set this argument to <code>false</code>.</p>
  <p>In browsers supporting previous versions of the DOM, you <strong>always</strong> need to provide this argument.</p>
</div>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush: js">
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>The original node is not removed from the original document. The imported node is a clone of the original.</p>
<p>{{ page("/en-US/docs/DOM/WRONG_DOCUMENT_ERR_note" }}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>DOM 2 version</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>9.0</td>
        <td>9.0</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>DOM 4 version<br />
          (<code>deep</code> optional)</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("10") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNightly("safari") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>DOM 2 version</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>DOM 4 version<br />
          (<code>deep</code> optional)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("10") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></li>
  <li><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-importnode">DOM4 (draft): Document.importNode</a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ domxref("document.adoptNode()") }}</li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/document.importNode", "ja": "ja/DOM/document.importNode","pl": "pl/DOM/document.importNode","zh-cn": "zh-cn/DOM/document.importNode" } ) }}</p>
Revert to this revision