jQuery dupliziert DIV in ein anderes DIV

100

Benötigen Sie Hilfe beim Kopieren eines DIV in einen anderen DIV und hoffen Sie, dass dies möglich ist. Ich habe folgendes HTML:

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

Und dann habe ich einen anderen DIV an einer anderen Stelle auf meiner Seite und möchte den 'button' div in den folgenden 'package' div kopieren:

<div class="package">

Place 'button' div in here

</div>
javascript jquery html Dan
quelle

Antworten:

164

Sie sollten die clone()Methode verwenden, um eine tiefe Kopie des Elements zu erhalten:

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

Vollständige Demo: http://jsfiddle.net/3rXjx/

Aus den jQuery-Dokumenten :

Die .clone () -Methode führt eine tiefe Kopie des Satzes übereinstimmender Elemente durch, dh, sie kopiert die übereinstimmenden Elemente sowie alle ihre untergeordneten Elemente und Textknoten. In Verbindung mit einer der Einfügemethoden ist .clone () eine bequeme Möglichkeit, Elemente auf einer Seite zu duplizieren.

chrx
quelle
1
Dadurch bleiben die vom Benutzer bei Eingaben hinzugefügten Werte nicht erhalten.
wtf8_decode
6
können Sie mir bitte sagen , warum wir brauchen $in var $button. Ich glaube an js kann man var einfach als deklarieren var button.
KNU
20
@KNU Es ist nicht notwendig, aber es ist eine übliche Konvention in der jQuery-Welt. Es gibt an, dass die Variable $ button ein jQuery-Objekt ist. Siehe stackoverflow.com/questions/205853/…
chrx
21

Kopieren Sie den Code mit der Funktion clone und appendTo:

Hier ist auch Arbeitsbeispiel 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
quelle
3

Sie können Ihr div so kopieren 

$(".package").html($(".button").html())
JAVAGeek
quelle
2

Setzen Sie dies auf eine Veranstaltung

$(function(){
    $('.package').click(function(){
       var content = $('.container').html();
       $(this).html(content);
    });
});
Muhammad Raheel
quelle
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>
Erweitern Sie das Snippet

Für mehr Details und Demo

Entwickler
quelle