jQuery duplique DIV dans un autre DIV

101

Besoin d'aide jquery pour copier un DIV dans un autre DIV en espérant que cela soit possible. J'ai le code HTML suivant:

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

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

<div class="package">

Place 'button' div in here

</div>
javascript jquery html Dan
la source

Réponses:

164

Vous voudrez utiliser la clone()méthode afin d'obtenir une copie complète de l'élément:

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

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

À partir de la documentation 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 nœuds de texte. Lorsqu'il est utilisé en conjonction avec l'une des méthodes d'insertion, .clone () est un moyen pratique de dupliquer des éléments sur une page.

chrx
la source
1
Cela ne conserve pas les valeurs ajoutées par l'utilisateur sur les entrées.
wtf8_decode
6
pouvez-vous s'il vous plaît me dire pourquoi nous avons besoin $de var $button. Je crois en js que vous pouvez déclarer var simplement comme var button.
KNU
20
@KNU Ce n'est pas nécessaire mais c'est une convention courante dans le monde jQuery. Cela indique que la variable $ button est un objet jQuery. Voir stackoverflow.com/questions/205853/…
chrx
21

Copiez le code à l'aide de la fonction clone et appendTo:

Voici également l'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>
Sunny SM
la source
3

Vous pouvez copier votre div comme ça 

$(".package").html($(".button").html())
JAVAGeek
la source
2

Mettez ceci sur un événement

$(function(){
    $('.package').click(function(){
       var content = $('.container').html();
       $(this).html(content);
    });
});
Muhammad Raheel
la source
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>
Développer l'extrait

Pour plus de détails et une démonstration

Développeur
la source