jQuery cloneTo вместо appendTo?

Question

Я пытаюсь использовать jquery appendTo, чтобы скопировать элемент в другой контейнер. Объект действительно прилагается, но он удаляется из источника. Есть ли способ добавить элемент, оставив исходный элемент там, где он есть? назовите его копией, назовите его клоном, назовите его, как вам хочется.

Вот мой текущий код:

jQuery(document).ready(function() 
{ 
    jQuery('#button').appendTo('#panel'); //button should appear ALSO in panel. 
}); 

Answer 1

Близко, но не достаточно близко. Код ниже будет clone() элемент, а затем добавьте его в #panel.

jQuery(document).ready(function() 
{ 
    jQuery('#button').clone().appendTo('#panel'); 
}); 

Обратите внимание, что это противоречит стандартам иметь ID используется дважды в одной и той же странице. Таким образом, чтобы исправить это:

jQuery(document).ready(function() 
{ 
    jQuery('#button').clone().attr('id', 'newbutton').appendTo('#panel'); 
}); 

Answer 2

код вам нужно будет запустить это:

Что это делает захватывает узел из DOM, а затем делает клон его в памяти. Затем линия берет этот новый объект (jQuery('#button').clone()), а затем добавляет его обратно в DOM по адресу #panel. Обычно это хорошая стратегия: попробуйте выполнить манипуляции с DOM, коснувшись DOM как можно меньше. Вы можете делать ТОНЫ манипулирования узлами и элементами без добавления или добавления их до самого конца.

Answer 3

Просто вызовите метод clone() на выбранном объекте JQuery перед добавлением его:

$('#button').clone().appendTo('#panel'); 

Если вам необходимо также клонировать все обработчики событий, подключенные к выбранным элементам, передать логическое true в качестве параметра в clone() метод.

Кроме того, вы можете хотите изменить атрибут id выбранного элемента ... Это так просто, как:

$('#button').clone().attr('id', 'button-clone').appendTo('#panel');