生成随机数的div

Question

我无法让脚本创建随机数量的div.在这个5到20之间的具体例子中.问题是在for循环中可能吗？生成随机数的函数在随机颜色函数下面正常工作,我想由于某些原因无法识别.我也没有在萤火虫中得到任何错误.

例:

function generateDiv(){
    var dfrag = document.createDocumentFragment();
    var count = generateRandom(5, 20);
    var i=0;
    for (var i = 0; i < count; i++){
        var div = document.createElement("div");
        dfrag.appendChild(div);
    }
}
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
    div = divs[i];
    alterDivStyle(div);
}
function rndColor() {
    var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red
          g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green
          b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue
    return '#' + r + g + b;
}

function generateRandom(min, max) {
    var number = Math.floor(Math.random() * (max - min )) + min;
    return number;
}
function alterDivStyle(div){
    div.style.width = generateRandom(20, 100) +"px";
    div.style.height = generateRandom(20, 100) +"px";
        div.style.backgroundColor = rndColor();
    div.style.color = rndColor();
    div.style.position = "absolute";
    div.style.border = "solid";
    div.style.borderColor = rndColor();
    div.style.borderWidth = rndColor();
    div.style.borderRadius = generateRandom(0, 10)+"px";
    div.innerHTML = "<strong>div</strong>";
};

Answer 1

您从未将文档片段添加到DOM

"DocumentFragments是DOM节点.它们永远不是主DOM树的一部分.通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树.在DOM树中,文件片段被其所有孩子所取代."

https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment