如何使用JavaScript重复div类？ [英] How do I repeat div classes using JavaScript only?

问题描述

好的，我不确定怎么说这个问题，但是基本上我想重复一下我的div容器，它们只使用javascript，没有HTML（启动页面所需的HTML除外）。如果我使用HTML这样做，结果应该是这样的。

http://jsfiddle.net/nqZjB/1/

 < div class =块> <！ - 重复三次 - > 
  

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

如何使div类块重复三次，如我的HTML示例中只使用javascript？当然在现实生活中，我将使用HTML作为javascript是不必要的，但我想要这样做纯粹的JavaScript，所以我可以学习。如果你有一个更好的方法，我应该如何写这个问题，作为旁注，让我知道。
感谢（：

http：// jsfiddle.net/TbCYH/1/

解决方案

请注意：每当向DOM添加内容时，强制浏览器回流DOM（元素的位置和几何的计算）。

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

（参考：文档.createDocumentFragment ）

  window.onload = Create（）; 
 
 function Create ）{
 
 //创建容器
 var mainContainer = document.createElement（'div'）; 
 mainContainer.id ='mainContainer'; 
 // add所有样式一个
 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 
 
 //所有内容仍然在内存中
 mainContainer.appendChild（divBlocks1）; 
 mainContainer.appendChild（divBlocks2）; 
 mainContainer.appendChild（divBlocks3）; 
 
 //现在我们将一切附加到文档
 document.body.appendChild（mainContainer）; 
 
} 
  

祝你好运
：）

Okay, I'm unsure how to word the question, but basically I want to repeat my div containers that have a class of "blocks" using only javascript, no HTML (other than the HTML needed to start a page). IF I were doing this using HTML the result should look exactly like this.

http://jsfiddle.net/nqZjB/1/

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

However as I stated in the description I do not want to use any HTML, so here is my fiddle with javascript only.

How do I make div class blocks repeat three times as in my HTML example using only javascript? Of course in real life I would use HTML for this as javascript is unnecessary, but I want to do this in pure javascript so I can learn. Also as a sidenote if you have a better way as to how I should have worded the question, let me know. Thanks (:

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

解决方案

Please note: Every time something is added to the DOM, it forces the browser to reflow the DOM (computation of element's position and geometry).

Adding everything at once, improve speed, efficiency and performance of a code.

(ref: 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);

}

Good luck :)

这篇关于如何使用JavaScript重复div类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！