Übergeordnetes Element an ein untergeordnetes Element mit Jquery anhängen

Question

Ich benötige Hilfe, um ein untergeordnetes Element an ein übergeordnetes Element anzuhängen. Dies ist mein Code. Ich muss den $ -Eintrag in die $ temp setzen.

Dank

function CaixaPin(){ 

    var $temp; 
    $temp = $("<div></div>"); 
    $temp.addClass("caixa"); 

    var $input; 
    for(var i=0; i<4; i++){ 
    $input = $("<div></div>"); 
    $input.addClass("caixaPin"); 
    $("body").append($input); 
    } 


    $("body").append($temp); 

} 

CaixaPin(); 

Answer 1

Body sowie $temp sowie input sind DOM-Elemente. Sie können Objekte an DOM-Elemente anhängen, was bedeutet, dass Sie etwas HTML in dem Element hinzufügen, an das Sie anhängen.

Da Sie alles an Körper anhängen (d. H.), wird es nicht gelingen, eine Eltern-Kind-Struktur in Bezug auf $temp und $input zu bekommen. Stattdessen fügen Sie $input an $temp an, nach dem Sie $temp an body anhängen.

function CaixaPin(){ 

    var $parentElement; 
    $parentElement = $("<div></div>"); 
    $parentElement.addClass("caixa"); 

    var $childElement; 
    for(var i=0; i<4; i++){ 
    $childElement = $("<div></div>"); 
    $childElement.addClass("caixaPin"); 
    $parentElement.append($childElement); 
    } 


    $("body").append($parentElement); 

} 

CaixaPin(); 

Answer 2

Sie an Elemente anhängen können, die nicht bereits in der dom sind und in Variablen wie $temp

ändern gespeichert:

$("body").append($input); 

An:

$temp.append($input); 

Answer 3

suchen Sie so etwas wie dieses

https://jsfiddle.net/zyjje3r8/1

<div class='parent'> 
parent div - click to add child 
</div> 
<div class='parent'> 
parent div - click to add child 
</div> 

SCRIPT

$(".parent").on("click",function(){ 
$(this).append("<p>child element</p>") 
}) 

Answer 4

Sie sollten nach dem Anfügen $temp Schleife von $input laufen.

Versuchen unter Beispiel

function CaixaPin(){ 
 
    var $temp; 
 
    $temp = $("<div>$temp</div>"); 
 
    $temp.addClass("caixa"); 
 

 
    $("body").append($temp); 
 
    
 
    var $input; 
 
    for(var i=0; i<4; i++){ 
 
     $input = $("<div>$input of "+i+"</div>"); 
 
     $input.addClass("caixaPin"); 
 
     $(".caixa").append($input); 
 
    } 
 
    console.log("Inspect your html code and check."); 
 
} 
 
CaixaPin();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>