DOM节点递归

时间:2016-08-29 21:22:44

标签: javascript dom

所以我有一个基本的递归函数工作,但我想将x个子节点附加到当前父节点..但我的递归函数中的for循环似乎没有追加任何超过1个子节点它是现在的父母。这是我的代码的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;
}

2 个答案:

答案 0 :(得分:2)

如果您的for循环,则不会创建4个新孩子。您只是创建一个并尝试将其附加到parent

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

答案 1 :(得分:1)

单个节点只能位于DOM中的一个位置。您的代码创建一个节点,然后尝试将其附加到几个不同的位置。该节点将在最后一个位置结束。

将调用移至<{1}}循环内的boxHelper()函数