creating a multilevel document fragment

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); = (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"); = "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.

以上就是creating a multilevel document fragment的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准