使用Jquery將父項追加到子元素

Question

我需要將子元素追加到父元素的幫助。這是我的代碼。我需要將$輸入放在$ temp中。

感謝

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

你應該追加$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>