Как я повторяю div-classы только с использованием JavaScript?

Хорошо, я не знаю, как сформулировать вопрос, но в основном я хочу повторить свои контейнеры div, которые имеют class «блоков», используя только javascript, без HTML (кроме HTML, необходимых для запуска страницы). ЕСЛИ я делаю это с использованием HTML, результат должен выглядеть точно так.

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

Однако, как я сказал в описании, я не хочу использовать какой-либо HTML-код, так что вот моя скрипка только с javascript.

Как сделать блоки classа div повторяться три раза, как в моем примере HTML, используя только javascript? Конечно, в реальной жизни я бы использовал HTML для этого, поскольку javascript не нужен, но я хочу сделать это в чистом javascript, чтобы я мог учиться. Кроме того, в качестве опоры, если у вас есть лучший способ, как я должен был сформулировать этот вопрос, дайте мне знать. Благодаря (:

http://jsfiddle.net/TbCYH/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 '
' + html + '
'; } // 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'); }
 for(var d=0;d<10;d++){ var aDiv = document.createElement('div'); aDiv.className = "block"; document.getElementsByTagName('body')[0].appendChild(aDiv); } 

Вместо того, чтобы создавать элементы перед раздачей, а затем добавлять их в основной контейнер, рассмотрите динамическое создание и добавление их в цикле.

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

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

В приведенном выше fragmentе кода создается и добавляется div для каждой итерации цикла (который должен быть остановлен на 3).

Также, если это возможно, всегда используйте CSS-classы, а не изменяйте стили для каждого div напрямую.

Обратите внимание: каждый раз, когда что-то добавляется в DOM, он заставляет браузер переплавлять DOM (вычисление позиции и геометрии элемента).

Добавляя все сразу, улучшайте скорость, эффективность и производительность кода.

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

Удачи 🙂