Jqueryを使用して子要素に親を追加する

Question

親要素に子要素を追加するためのヘルプが必要です。これは私のコードです。私は$ tempの中に$ inputを入れる必要があります。

おかげ

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など$tempなどinputのようなものを探していますが、DOM要素です。 DOM要素に物を追加することができます。つまり、追加している要素の内部にHTMLを追加します。

ボディにすべてを追加すると（つまり、$("body").append()）、$tempと$inputに関して親子構造を取得することはできません。代わりに$inputに$tempを追加した後、$temp〜bodyを追加します。

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

あなたはDOMにまだなっていないと$temp

の変更のように変数に格納されている要素に追加することができます

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

へ：

$temp.append($input); 

Answer 3

この

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

あなたはAPPEND $temp後$inputのループを繰り返す必要があります。

は、単に$（ "体"）を変更

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>