---
title: Node.cloneNode()
slug: Web/API/Node/cloneNode
translation_of: Web/API/Node/cloneNode
---
<div>{{APIRef("DOM")}}</div>

<p>Метод <strong><code>Node.cloneNode()</code></strong> возвращает дубликат узла, из которого этот метод был вызван.</p>

<h2 id="Syntax" name="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>Узел, который будет клонирован.</dd>
 <dt><em>dupNode</em></dt>
 <dd>Новый узел, который будет клоном <code>node</code></dd>
 <dt><em>deep {{optional_inline}}</em></dt>
 <dd><code>true,</code> если дети узла должны быть клонированы или <code>false</code> для того, чтобы был клонирован только указанный узел.</dd>
</dl>

<div class="note">
<p><strong>Примечание:</strong> в спецификации DOM4 (как реализовано в Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> необязательный аргумент. Если он опущен, метод действует как если бы значение <code>deep</code> было <strong><code>true</code></strong>, по умолчанию используется глубокое клонирование. Для создания поверхностного клонирования, <code>deep</code> должен быть установлен как <code>false</code>.</p>

<p>Это поведение было изменено в последней спецификации, и если опущено значение, метод будет действовать как если бы <code>deep</code> было <strong><code>false</code></strong>. Хотя, это все еще не обязательно, вы всегда должны обеспечить агрументом <code>deep</code>, для прямой и обратной совместимости. С Gecko 28.0 {{geckoRelease(28)}}), консоль предупреждает разработчиков не опускать аргумент. Начиная с Gecko 29.0 {{geckoRelease(29)}}), поверхностный клон, по умолчанию, вместо глубокого клона.</p>
</div>

<h2 id="Example" name="Example">Пример</h2>

<pre class="brush: js">    var p = document.getElementById("para1");
    var p_prime = p.cloneNode(true);
</pre>

<h2 id="Notes" name="Notes">Примечание</h2>

<p id="not-event-listeners">Клонирование узлов копирует все атрибуты и их значения, в том числе собственных (в линию) перехватчиков. Это не копирует пререхватчики событий, добавленных используя <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> или тех что назначены через свойства элемента (т.е <code>node.onclick = fn</code>).</p>

<p>Дубликат узла, возвращенного <code>cloneNode()</code> не является частью документа, пока не будет добавлен в другой узел, который является частью документа, используя {{domxref("Node.appendChild()")}} или другой метод. Кроме того, не имеет родителя, пока не будет добавлен к другому узлу.</p>

<p><code>Если deep</code> установлен как <code>false</code>, дочерние узлы не клонируются. Любой текст, который содержит узел также не клонируется, как и содержащийся в одном или более дочернем узле {{domxref("Text")}}.</p>

<p>Если <code>deep</code> установлено как <code>true</code>, все поддеревья (включая текст, который может быть потомком узла {{domxref("Text")}}) копируется тоже. Для пустых узлов (т.е {{HTMLElement("img")}} и {{HTMLElement("input")}} элементов) это не имеет значения установлен ли <code>deep</code> как <code>true</code> или <code>false</code>.</p>

<div class="warning"><strong>Внимание:</strong> <code>cloneNode()</code> может привести к дублированию идентфикаторов элементов в документе.</div>

<p>Если исходный узел имеет идентификатор и клон размещен в том же документе, идентификатор должен быть изменен, для того что бы быть уникальным. Имя атрибута также может нуждаться в изменении, <span id="result_box" lang="ru"><span>в зависимости</span> <span class="hps">от</span></span> будущего имени дубликата.</p>

<p>Чтобы клонировать узел для добавления к другому документу используйте {{domxref("Document.importNode()")}} вместо этого.</p>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Свойство</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>deep</code> как необязательный параметр</td>
   <td>
    <p>Yes</p>

    <p>(По умолчанию <code>false</code>)</p>
   </td>
   <td>{{CompatGeckoDesktop("13.0")}}</td>
   <td><span style="font-size: 12px; line-height: 18px;">{{CompatVersionUnknown}}</span></td>
   <td>{{CompatUnknown}}</td>
   <td>
    <p>Yes</p>

    <p>(По умолчанию <code>false</code>)</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Свойство</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>Базовая поддержка</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> как необязательный параметр</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>

<h2 id="Спецификации">Спецификации</h2>

<ul>
 <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
 <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
 <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (черновик)</li>
</ul>