jQuery дублирует DIV в другой DIV

103

Нужна помощь jquery, копирующая DIV в другой DIV и надеясь, что это возможно. У меня есть следующий HTML:

  <div class="container">
  <div class="button"></div>
  </div>

Затем у меня есть еще один DIV в другом месте на моей странице, и я хотел бы скопировать div 'button' в следующий div 'package':

<div class="package">

Place 'button' div in here

</div>
javascript jquery html Дэн
источник

Ответы:

166

Вы захотите использовать этот clone()метод, чтобы получить полную копию элемента:

$(function(){
  var $button = $('.button').clone();
  $('.package').html($button);
});

Полная демонстрация: http://jsfiddle.net/3rXjx/

Из документации jQuery :

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

chrx
источник
1
Это не сохраняет значения, добавленные пользователем во входные данные.
wtf8_decode
6
Пожалуйста , вы можете сказать мне , почему мы должны $в var $button. Я считаю, что в js можно объявить var просто как var button.
KNU
20
@KNU В этом нет необходимости, но это обычное соглашение в мире jQuery. Он указывает на то, что переменная $ button является объектом jQuery. См stackoverflow.com/questions/205853/...
chrx
21

Скопируйте код с помощью функций clone и appendTo:

Вот также рабочий пример jsfiddle

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="copy"><a href="http://brightwaay.com">Here</a> </div>
<br/>
<div id="copied"></div>
<script type="text/javascript">
    $(function(){
        $('#copy').clone().appendTo('#copied');
    });
</script>
</body>
</html>
Солнечный СМ
источник
3

Вы можете скопировать свой div следующим образом 

$(".package").html($(".button").html())
JAVAGeek
источник
2

Поместите это на мероприятие

$(function(){
    $('.package').click(function(){
       var content = $('.container').html();
       $(this).html(content);
    });
});
Мухаммад Рахил
источник
0 

$(document).ready(function(){  
    $("#btn_clone").click(function(){  
        $("#a_clone").clone().appendTo("#b_clone");  
    });  
});  
.container{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery Clone Method</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 


</head>  
<body> 
<div class="container">
<p id="a_clone"><b> This is simple example of clone method.</b></p>  
<p id="b_clone"><b>Note:</b>Click The Below button Click Me</p>  
<button id="btn_clone">Click Me!</button>  
</div> 
</body>  
</html>
Развернуть фрагмент

Для более подробной информации и демонстрации

Разработчик
источник