Question

好吧，我不确定如何说出这个问题，但基本上我想重复我的div容器，这些容器只有一个“块”，只使用javascript，没有HTML（除了启动页面所需的HTML）。如果我使用HTML这样做，结果看起来应该是这样的。

   <div class = "blocks"> <!-- Repeats three times -->

然而，正如我在说明中所述，我不想使用任何HTML，所以这里只是我的小提琴。

如何使用javascript在我的HTML示例中重复三次div类块重复？当然在现实生活中我会使用HTML，因为javascript是不必要的，但我想在纯JavaScript中这样做，所以我可以学习。另外作为旁注，如果你有更好的方式来说明我应该如何措辞，请告诉我。谢谢（：

http://jsfiddle.net/TbCYH/1/

Answer 1

你可以看到使用重现模式的功能。

在将它发布到StackOverflow之前，您是否尝试过自己动手？

jsfiddle：http://jsfiddle.net/kychan/W7Jxu/

//    we will use a container to place our blocks.
//     fetch the element by id and store it in a variable.
var container = document.getElementById('container');

function block(mClass, html) {
    //extra html you want to store.
    return '<div class="' + mClass + '">' + html + '</div>';
}

//    code that loops and makes the blocks.
//    first part: creates var i
//    second:     condition, if 'i' is still smaller than three, then loop.
//    third part: increment i by 1;
for (var i = 0; i < 3; i++) {
    // append the result of function 'block()' to the innerHTML
    // of the container.
    container.innerHTML += block('block', 'data');
}

Answer 2

不是手工创建元素然后将它们附加到主容器，而是考虑动态创建并将它们附加到循环中。

http://jsfiddle.net/TbCYH/6/

   for(var i = 0; i < 3; i++) {
       var divBlock = document.createElement("div");                
       divBlock.className = "blocks";
       mainContainer.appendChild(divBlock);       
   }

在上面的代码片段中，为循环的每次迭代创建并附加div（设置为停止在3）。

如果可能的话，总是使用CSS类，而不是直接修改每个div的样式。

Answer 3

for(var d=0;d<10;d++){
   var aDiv = document.createElement('div');
       aDiv.className = "block";
   document.getElementsByTagName('body')[0].appendChild(aDiv);
}

Answer 4

请注意：每次向DOM添加某些内容时，它都会强制浏览器重排DOM（计算元素的位置和几何）。

一次添加所有内容，提高代码的速度，效率和性能。

（参考：document.createDocumentFragment）

window.onload = Create();

function Create() {

   // create the container
   var mainContainer = document.createElement('div');
   mainContainer.id = 'mainContainer';
   // add all style in one go
   mainContainer.setAttribute('style', 'witdht: 400px; height: 200px; border: 2px solid green; margin-left: 20px;');


   var divBlocks1 = document.createElement('div');
   divBlocks1.className = 'blocks';
   divBlocks1.setAttribute('style', 'width: 100px; heigth: 100px; border: 1px solid black; margin-left: 20px; margin-top: 10px; floar: left;');

   var divBlocks2 = divBlocks1.cloneNode(false); // copy/clone above div
   var divBlocks3 = divBlocks1.cloneNode(false); // copy/clone above div

   // everything is still in memory
   mainContainer.appendChild(divBlocks1);
   mainContainer.appendChild(divBlocks2);
   mainContainer.appendChild(divBlocks3);

   // now we append everything to the document
   document.body.appendChild(mainContainer);

}

祝你好运：）

如何仅使用JavaScript重复div类？

4 个答案: