DOMノードrecurssion

Question

私は、基本的な再帰関数が動作しているが、現在の親に子ノードのx番号を追加したい..しかし、私の再帰関数のforループは、子ノードを現在の親ノードに追加します。ここに私のコードのjs binがあります。 http://jsbin.com/bihuvotupe/1/edit?html,js,output

function populate(parent, n){ 
    // loop and append 
    if(n === 0){ 
     return; 
    }else{ 
     n--; 
     var child = boxHelper("40%", "40%"); 
     for(var i = 0; i <= 4; i++){ 
      console.log(i); 
      parent.appendChild(child); 

     } 
     populate(child, n); 
    } 
} 

var mother = boxHelper("600px", "600px"); 
document.body.appendChild(mother); 
populate(mother, 4); 



// makeNodeRefs(callender); 


function boxHelper(height, width){ 
    var element = document.createElement("div"); 
    element.style.height = height; 
    element.style.width = width; 
    //element.style.background = colour; 
    element.style.float = "left"; 
    element.style.margin = "5px"; 
    element.style.border = "2px solid black"; 
    element.style.borderRadius = "3px"; 
    // element.classList.add("inflate"); 
    return element; 
} 

Answer 1

単一ノードは、DOM内の1つの場所にあることができます。あなたのコードは単一のノードを作成し、それをいくつかの異なる場所に追加しようとします。ノードは最後の場所になります。

boxHelper()ファンクションforループ内に移動します。

Answer 2

あなたforループ場合は、4人の新しい子供たちを作成していません。あなたは1つしか作成せず、それをparentに追加しようとしています。

http://jsbin.com/suhukiviqi/1/edit?html,js,output