.clone()

.clone( [withDataAndEvents ] )Возвращает: jQuery

Описание: Создаёт глубокую копию набора совпадающих элементов.

версия добавлена: 1.0.clone( [withDataAndEvents ] )
- withDataAndEvents (по умолчанию: false)
  
  Тип: Boolean
  
  Логическое значение, указывающее, следует ли копировать обработчики событий вместе с элементами. Начиная с jQuery 1.4, также копируются данные элементов.
версия добавлена: 1.5.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
- withDataAndEvents (по умолчанию: false)
  
  Тип: Boolean
  
  Логическое значение, указывающее, следует ли копировать обработчики событий и данные вместе с элементами. Значение по умолчанию — false. *В jQuery 1.5.0 значение по умолчанию было неправильным true; оно было возвращено к false в 1.5.1 и последующих версиях.
- deepWithDataAndEvents (по умолчанию: value of withDataAndEvents)
  
  Тип: Boolean
  
  Логическое значение, указывающее, следует ли копировать обработчики событий и данные для всех дочерних элементов клонированного элемента. По умолчанию его значение совпадает со значением первого аргумента (которое по умолчанию false).

Метод .clone() выполняет глубокую копию набора совпадающих элементов, что означает, что он копирует совпадающие элементы, а также все их дочерние элементы и текстовые узлы.

Примечание: По соображениям производительности динамическое состояние некоторых элементов формы (например, данные пользователя, введённые в textarea и пользовательские выделения в select) не копируются в клонированные элементы. При клонировании input элементов динамическое состояние элемента (например, данные пользователя, введённые в текстовые поля, и пользовательские выделения в чекбоксе) сохраняется в клонированных элементах.

При использовании совместно с методами вставки .clone() является удобным способом дублирования элементов на странице. Рассмотрим следующий HTML:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Как показано в обсуждении для .append(), обычно, когда элемент вставляется где-либо в DOM, он перемещается из своего старого местоположения. Итак, учитывая код:

$( ".hello" ).appendTo( ".goodbye" );

Результирующая структура DOM будет такой:

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

Чтобы предотвратить это и вместо этого создать копию элемента, можно написать следующее:

$( ".hello" ).clone().appendTo( ".goodbye" );

Это приведет к:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

Примечание: При использовании метода .clone() можно изменять клонированные элементы или их содержимое до (пере)вставки их в документ.

Обычно любые обработчики событий, связанные с исходным элементом, не копируются в клон. Необязательный параметр withDataAndEvents позволяет изменить это поведение и вместо этого создать копии всех обработчиков событий, привязанных к новой копии элемента. Начиная с jQuery 1.4, все данные элементов (присоединённые методом .data()) также копируются в новую копию.

Однако объекты и массивы внутри данных элементов не копируются и по-прежнему будут совместно использоваться между клонированным элементом и исходным элементом. Для глубокой копии всех данных скопируйте каждый вручную:

// Original element with attached data
var $elem = $( "#elem" ).data( "arr", [ 1 ] ),
    $clone = $elem.clone( true )
      // Deep copy to prevent data sharing
      .data( "arr", $.extend( [], $elem.data( "arr" ) ) );

Начиная с jQuery 1.5, withDataAndEvents может быть дополнительно расширен параметром deepWithDataAndEvents для копирования событий и данных для всех дочерних элементов клонированного элемента.

Примечание: Использование .clone() приводит к побочному эффекту — созданию элементов с дублирующимися атрибутами id, которые должны быть уникальными. По возможности рекомендуется избегать клонирования элементов с этим атрибутом или использовать атрибуты class в качестве идентификаторов.

Пример:

Клонирует все элементы b (и выбирает клоны) и вставляет их перед всеми абзацами.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<b>Hello</b><p>, how are you?</p>
 
<script>
$( "b" ).clone().prependTo( "p" );
</script>
 
</body>
</html>

.clone( [withDataAndEvents ] )Возвращает: jQuery

версия добавлена: 1.0.clone( [withDataAndEvents ] )

версия добавлена: 1.5.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

Пример:

Демо: