そのため、多次元のドキュメントフラグメントを作成しようとしていて、少し障害が発生しています。ドキュメント フラグメント 1 のみを追加して、リフローを 1 つだけ作成したい。私は基本的に、内部にy個のdivを含むx個のdivを作成しようとしています。私の最初の考えは、新しく作成された要素に div を追加することでしたが、機能していないようです。最初のステートメントは親の内側に入る大きな div で、2 つ目は親の内側に入る大きな 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'));
}
残念ながら、この編集は機能しません