Wie hängt man mit jQuery ein Element (div) an, das mehrere Elemente enthält?

Question

Ich habe ein Objekt <div>, das viele divs enthält. Und ein einfacher Knopf. Ich möchte das erste Objekt jedes Mal erstellen, wenn auf die Schaltfläche geklickt wird.

Für jetzt kann ich nur das Objekt erstellen, aber leer, wie kann ich tun, um die div mit all ihren Kind (das "Hallo" innerhalb) zu erstellen?

Hier ist ein einfaches Skript

$(".button").click(function(){ 
 
\t var div = document.createElement('div'); 
 
\t div.className = 'object'; 
 
\t $(".container").append(div); 
 
});

.object{ 
 
    margin-top:10px; 
 
    width:100px; 
 
    height:50px; 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<button class="button" type="button"> 
 
create an object 
 
</button> 
 
<div class="container"> 
 
<div class="object"> 
 
    <p> 
 
    hello 
 
    </p> 
 
</div> 
 
</div>

Answer 1

Hier eine mögliche Lösung ist. Ihr Container-Div kann als Container mit Child-Div-Elementen betrachtet werden. Sie sollten also Ihr Objekt klonen und es dann an diesen Container anhängen.

Schauen Sie sich dieses Snippet an.

$(".button").click(function(){ 
 
    $(".object:first").clone().appendTo("div.container"); 
 
});

.object{ 
 
    margin-top:10px; 
 
    width:100px; 
 
    height:50px; 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<button class="button" type="button"> 
 
create an object 
 
</button> 
 
<div class="container"> 
 
    <div class="object"> 
 
    <p> 
 
     hello 
 
    </p> 
 
    </div> 
 
</div>

Eine andere mögliche Lösung ist html()

$(".button").on("click", function() { 
 
    $(".container").html($(".container").html() + "<div class='object'><p>Hello</p></div>"); 
 
});

.object{ 
 
     margin-top:10px; 
 
     width:100px; 
 
     height:50px; 
 
     background-color:red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<button class="button" type="button"> 
 
create an object 
 
</button> 
 
<div class="container"> 
 
    <div class="object"> 
 
    <p> 
 
     hello 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

verwenden Wenn Sie es wollen, eine Kopie des ersten Elements sein, Sie clone() verwenden können. Wenn das Element nicht zum Starten da sein soll, fügen Sie das Element an einer anderen Stelle der Seite hinzu und wählen Sie es aus.

$(".button").click(function(){ 
 
\t var cont = $(".container"), 
 
     div = cont.find(".object").eq(0).clone();  
 
    cont.append(div); 
 
});

.object{ 
 
    margin-top:10px; 
 
    width:100px; 
 
    height:50px; 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<button class="button" type="button"> 
 
create an object 
 
</button> 
 
<div class="container"> 
 
<div class="object"> 
 
    <p> 
 
    hello 
 
    </p> 
 
</div> 
 
</div>

Answer 3

Hier gehen Sie ... klonen es mit wahr, was bedeutet, kopiert es alles, einschließlich Veranstaltungen etc ... dann diesen Klon anhängen.

Wenn ich geholfen habe, stimme bitte für meine Antwort. :)

$(".button").click(function(){ 
 
\t /*var div = document.createElement('div'); 
 
\t div.className = 'object'; 
 
\t $(".container").append(div);*/ 
 

 
    //new stuff 
 
    var clone = $(".object").clone(true); 
 
    $(".container").append(clone); 
 
});

.object{ 
 
    margin-top:10px; 
 
    width:100px; 
 
    height:50px; 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<button class="button" type="button"> 
 
create an object 
 
</button> 
 
<div class="container"> 
 
<div class="object"> 
 
    <p> 
 
    hello 
 
    </p> 
 
</div> 
 
</div>