Создание многоуровневого фрагмента документа

Question

Поэтому я пытаюсь создать многомерный фрагмент документа и сталкиваюсь с чем-то вроде дорожного блока. Я хочу добавить только один фрагмент документа, чтобы создать только одну перекомпоновку. Я в основном пытаюсь создать 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++){...}