web-dev-qa-db-fra.com

jQuery dupliquer DIV dans un autre DIV

Besoin d'aide pour copier une DIV dans une autre DIV et espérer que cela est possible. J'ai le code HTML suivant:

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

Et puis j'ai un autre DIV à un autre endroit de ma page et je voudrais copier le div "button" dans le "package" div suivant:

<div class="package">

Place 'button' div in here

</div>
javascriptjqueryhtml
89
Dan

Vous voudrez utiliser la méthode clone() pour obtenir une copie détaillée de l'élément:

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

Démo complète: http://jsfiddle.net/3rXjx/

Depuis le docs jQuery :

La méthode .clone () effectue une copie complète de l'ensemble des éléments correspondants, ce qui signifie qu'elle copie les éléments correspondants, ainsi que tous leurs éléments descendants et leurs nœuds de texte. Utilisé conjointement avec l’une des méthodes d’insertion, .clone () est un moyen pratique de dupliquer des éléments d’une page.

147
chrx

Copiez le code en utilisant la fonction clone et appendTo:

Voici également un exemple de travail 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>
19
Sunny S.M

Mettez ceci sur un événement

$(function(){
    $('.package').click(function(){
       var content = $('.container').html();
       $(this).html(content);
    });
});
2
Muhammad Raheel

Vous pouvez copier votre div comme ça

$(".package").html($(".button").html())
0
JAVAGeek
$(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>

Pour plus de détails et démo

0
Developer