Как скопировать DIV и его содержимое, и добавить его в другом месте, но сохранить оригинальный скрытый

Question

У меня есть DIV элемент, как:

<div id="abc">....</div> 

Он скрыт или display:none по умолчанию на странице загрузки.

Я знаю, что хочу добавить этот div и его содержимое в другое место и сделать его видимым, но оригинал должен оставаться невидимым (или я могу удалить его).

Как я могу это сделать?

В настоящее время я добавляю его, но он отображается в двух местах.

Answer 1

Возьмите HTML из вашего скрытого DIV и добавить его к вашей цели с помощью .html() и .append()

var html = $('div.hidden-div').html(); 
$('div.target-div').append(html); 

Чтобы показать целевой DIV затем удалить старую, сделайте следующее:

$('div.target-div').show(); 
$('div.hidden-div').remove(); 

Answer 2

Глубокий клон, добавить, удалить id атрибут и показать.

​​$("div#abc") 
    .clone() 
    .appendTo("div#other") 
    .removeAttr("id") 
    .show();​​​​​​ 

Удалить или изменить атрибут id, имеющие несколько элементов с одинаковыми id хлопотно. Если вы будете использовать классы CSS вы можете также использовать его таким образом:

.template { 
    display: none; 
} 

​​$("div.template") 
    .clone() 
    .appendTo("div#other") 
    .removeClass("template");​​​​​​ 

Answer 3

Если OK, чтобы удалить его (как вы сказали), просто добавьте его к другому элементу. Элемент автоматически будет удален с первого места и никогда не появится там.

$("#abc").appendTo(place2).show();