---
title: Node.cloneNode()
slug: Web/API/Node/cloneNode
tags:
- API
- DOM
- Precisa de compatibilidade entre Browsers
- Referencia
- Referência DOM
- metodo
translation_of: Web/API/Node/cloneNode
---
<div>{{APIRef("DOM")}}</div>
<p>O método <strong><code>Node.cloneNode()</code></strong> duplica um elemento node (nó) da estrutura de um documento DOM. Ele retorna um clone do elemento para o qual foi invocado.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>);
</pre>
<dl>
<dt><em>node</em></dt>
<dd>O elemento node (nó) a ser clonado 'duplicado'.</dd>
<dt><em>dupNode</em></dt>
<dd>O novo elemento node (nó) resultado da clonagem do elemento node.</dd>
<dt><em>deep {{optional_inline}} [1]</em></dt>
<dd>true se os elementos filhos do nó que está sendo clonado devem ser clonados juntos, ou false para clonar apenas o nó específico dispensando, assim, qualquer elemento DOM filho. Veja os exemplos abaixo.</dd>
</dl>
<div class="note">
<p><strong>Nota:</strong> Na especificação do DOM4 (implementado no Gecko 13.0 {{geckoRelease(13)}}), o argumento <code>deep</code> é opcional. Se omitido, por padrão, o método age como se o valor de deep fosse setado como true durante a sua execução. Para criação de clones superficiais, o argumento <code>deep</code> deve ser setado como <code>false</code>.</p>
<p>Este comportamento foi alterado na última especificação. Se omitido o argumento deep, o método irá interpretar o valor de deep como se fosse false. Embora ele continue opcional, é recomendado que você sempre observe o argumento deep para fins de compatibilidade anterior e posterior. Com o Gecko 28.0 {{geckoRelease(28)}}), foi advertido aos desenvolvedores para não omitirem o argumento. Iniciado com o Gecko 29.0 {{geckoRelease(29)}}), um clone superficial é o padrão ao invés de um clone aprofundado.</p>
</div>
<h2 id="Exemplo">Exemplo</h2>
<pre class="brush: js"><div id="paragrafos">
<p>Texto parágrafo</p>
</div>
//Obtém o elemento div
var div_p = document.getElementById("paragrafos");
//Obtém o primeiro filho do elemento div
var p = div_p.firstChild;
//Clona o elemento, no caso, um parágrafo
var p_clone = p.cloneNode(true);
//Adiciona o clone do elemento <p> ao elemento <div>
div_p.appendChild(p_clone);
</pre>
<h2 id="Notas">Notas</h2>
<p>A clonagem de um elemento node copia todos os seus atributos e valores. Porém, não tem o mesmo comportamento em relação aos "event listeners".</p>
<p>O elmento node resultante da ação de clonagem não faz parte da estruturam DOM do documento até que ele seja adicionado utilizando o método appendChild() ou outro similar, conforme exemplo acima.</p>
<p>Se o argumento (deep) for setado como false, os nós filhos do elemento node clonado não serão clonados juntos, assim como os respectivos textos.</p>
<p>Se o argumento (deep) for setado como true, os nós filhos, toda a árvore DOM do elemento clonado, será clonada junto.</p>
<div class="warning"><strong>Cuidado:</strong> <code>cloneNode()</code> pode duplicar IDs em um documento.</div>
<p>Se o elemento node (nó) clonado tiver uma ID e o novo elemento node resultante da clonagem for ser inserido no mesmo documento, a ID de um dos nós deve ser alterada para que observem o princípio de unicidade. Em outras palavras, um mesmo documento não pode ter elementos com IDs iguais. Se for o caso de trabalhar com manipulação de elementos DOM através do atributo "name", tome cuidado em observá-lo.</p>
<p>Clonagem de node (nó) para um documento diferente, use o seguinte método: {{domxref("Document.importNode()")}}.</p>
<h2 id="Specificações">Specificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specificação</th>
<th scope="col">Status</th>
<th scope="col">Comentários</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
<td>{{Spec2("DOM3 Core")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
<td>{{Spec2("DOM2 Core")}}</td>
<td>Definição Inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>(deep)</code> como parâmetro opcional</td>
<td>
<p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
</td>
<td>{{CompatGeckoDesktop("13.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>
<p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>(deep)</code> como parâmetro opcional</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("13.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Valor padrão para o argumento (<code>deep)</code> é <code>false</code>.</p>