it-swarm.com.de

jQuery dupliziert DIV in einen anderen DIV

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 weiteren 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>
89
Dan

Sie möchten 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 untergeordneten Elemente und Textknoten. In Verbindung mit einer der Einfügemethoden ist .clone () eine bequeme Methode, um Elemente auf einer Seite zu duplizieren.

147
chrx

Kopieren Sie den Code mit der Funktion clone und appendTo:

Hier ist auch ein 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>
19
Sunny S.M

Setzen Sie dies auf eine Veranstaltung

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

Du kannst dein div so kopieren

$(".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>  

Für mehr Details und Demo

0
Developer