creating a multilevel document fragment

Question

so I am trying to create a multidimensional document fragment and am running into a bit of a road block. I only want to append a document fragment one so that I only create one reflow. I am basically trying to create x number of divs with y number of divs inside of them. My initial thought was to add divs into a newly created element but it does not seem to be working. I just have 2 for statements the first one are the bigger divs that will go inside the parent, and the second one is for the baby divs that will be inside the bigger divs that will go inside the parent. I think I am going wrong where after creating a document fragment to put all of the divs into, I try to insert that into an element that is not yet in the DOM. I am not sure though. Any feedback would be helpful. I have yet to find an article about creating multileveled document fragments.

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);
}

EDIT

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

this edit unfortunately does not work

append the child divs to the parent div, no need for a fragment. — epascarello, Oct 22 '13 at 23:28
like this? for(var i1 = 0; i1 < o.sliceX*o.sliceY; i1++){ newDiv.append(document.createElement('div')); } — Michael McLaughlin, Oct 22 '13 at 23:32
Use document.createElement('div'); and document.appendChild( < Your div Reference. > ); — Jeffpowrs, Oct 23 '13 at 00:49
that is exactly what I used inside the second for loop and it did not seem to work. — Michael McLaughlin, Oct 23 '13 at 01:38

score 0 · Answer 1 · answered Sep 16 '15 at 13:37

I'm aware that I'm late to the party and the issue in itself has probably been resolved (or abandoned) since long.

The edited part

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

It does not work because newDiv here does not have an append method, it is a DOMElement, not anything jQuery-like. The proper syntax for working with DOMElement nodes would be

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

Totally unrelated to the question asked

While I'm at it, you should realise the o.sliceX*o.sliceY part is evaluated for every iteration of the loop, I'd change this to

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

creating a multilevel document fragment

1 Answers1