Question

所以我正在尝试创建一个多维文档片段，并且遇到了一些障碍。我只想附加一个文档片段，以便我只创建一个reflow。我基本上试图创建x个div，其中包含y个div。我最初的想法是将div添加到一个新创建的元素中，但它似乎不起作用。我只有2个用于语句，第一个是更大的div将进入父级，第二个用于将在更大的div内部的婴儿div将进入父级。我认为在创建文档片段以将所有div放入其中之后我会出错，我尝试将其插入到尚未包含在DOM中的元素中。我不确定。任何反馈都会有所帮助。我还没有找到一篇关于创建多层文档片段的文章。

function addDivs(element) {
    var newDiv, fragment = document.createDocumentFragment();
    for (var i = 0; i < numberOfPics; i++) {
        newDiv = document.createElement('div');
        var newBabyDiv, newBabyFragment = document.createDocumentFragment();
        for(var i1 = 0; i1 < o.sliceX*o.sliceY; i1++){
            newBabyDiv = document.createElement('div');
            newBabyFragment.appendChild(newBabyDiv);
        }
        newDiv.append(newBabyFragment);
        newDiv.id = (picIdRoot+i);
        newDiv.className = (o.allPictures);
        if (i < numberOfPics - 3){
        }else if(i == numberOfPics - 2){
            newDiv.className = (o.allPictures+" "+o.currentPic);
        }else if(i == numberOfPics - 1){
            newDiv.className = (o.allPictures+" "+o.currentPic+" "+o.picAfterCurrent);
        }else{}
        fragment.appendChild(newDiv);
    }

    //fill the style element with text
    var style = document.createElement("style");
    style.id = "slideShow-styling";
    fragment.appendChild(style);

    //append to slideshow container
    slideShowContainer.append(fragment);
}

修改

for(var i1 = 0; i1 < o.sliceX*o.sliceY; i1++){
    newDiv.append(document.createElement('div'));
}

这个编辑很遗憾不起作用

Answer 1

我意识到我已经迟到了，这个问题本身可能已经解决（或放弃）了很长时间。

编辑过的部分

for(var i1 = 0; i1 < o.sliceX*o.sliceY; i1++){
    newDiv.append(document.createElement('div'));
}

它不起作用，因为newDiv这里没有append方法，它是DOMElement，不像jQuery那样。使用DOMElement节点的正确语法是

for(var i1 = 0; i1 < o.sliceX*o.sliceY; i1++){
    newDiv.appendChild(document.createElement('div'));
}

与提出的问题完全无关

虽然我正在研究它，你应该意识到o.sliceX*o.sliceY部分是针对循环的每次迭代进行评估的，我将其更改为

for(var i1 = 0, len = o.sliceX*o.sliceY; i1 < len; i1++){...}

创建一个多级文档片段

1 个答案: