JS, создающий divs с циклом for внутри контейнера

-1

Я пытаюсь создать несколько div внутри контейнера, но я не могу понять, как вложить созданные в основной контейнер. Возможно ли создать или лучше создать контейнер раньше в html?JS, создающий divs с циклом for внутри контейнера

function createDiv(numberOfDivs) { 
    var i = 0; 
    var newElement = []; 
    var mainContainer = document.createElement('div'); 

    mainContainer.innerHTML = 'MAIN CONTAINER'; 
    mainContainer.className = 'main'; 
    document.body.appendChild(mainContainer); 

    for (i; i < numberOfDivs; i++) { 
    newElement[i] = document.createElement('div'); 
    newElement[i].style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 
    newElement[i].className = 'box'; 
    newElement[i].id = (i + 1); 
    newElement[i].textContent = 'this is div number: ' + (i + 1); 
    document.body.appendChild(newElement[i]); 
    } 
}; 

createDiv(10);

источник

2016-11-20 HendrikEng

Вы можете создать контейнер в html раньше и не показывать их. Затем вам нужно добавить класс в js, чтобы сделать их видимыми. – theoretisch

Возможный дубликат [Генерировать 3000 квадратов процедурно] (http://stackoverflow.com/questions/40707643/generate-3000-squares-procedurally) –

Возможный дубликат: http://stackoverflow.com/questions/40707643/generate-3000-squares-procedurally/40707772#40707772 –

Да, вы можете создать контейнер в html раньше времени, как предложили другие. Затем вы можете вложить свои div в этот контейнер.

<html><body><div id="mainContainer" ></div></body></html>

Как и другие, вы можете применить необходимый css, чтобы скрыть его, если необходимо, до тех пор, пока вы не увидите его.

Тогда Javascript в гнездо дивы внутри mainContainer:

function createDiv(numberOfDivs){ 
    var $mainContainer = $("#mainContainer"); 
    for (i; i < numberOfDivs; i++) { 
     var newDiv = $("<div class='box' />"); 

     //...you can add whatever attributes to the div that you want... 

     $mainContainer.append(newDiv); 
    } 
}

источник

2016-11-20 20:48:50

спасибо за вашу помощь, просто увидел его, но я пытался избежать jquery любой ценой. но добавление в основной контейнер помогло :) – HendrikEng

Если вы можете, вы должны создать их без использования JavaScript. В противном случае вы добавляете новые элементы в document.body. Просто измените это на mainContainer.

источник

2016-11-20 20:35:28 Taplar

Новые элементы могут быть сделаны за пределами DOM, а затем добавлены все сразу в конце. –

Как это отражается на моем комментарии о таргетинге на неправильный элемент для добавления? – Taplar

Это не так. Но: * Если вы можете, вы должны создать их, не используя javascript. * Неправильно. –

Вы можете создать их с помощью Javascript (.appendChild). Если вы хотите, вы можете создать их в своем HTML сначала (без Javascript) и сделать их скрытыми, если это необходимо, например, через display: none, а затем сделать их видимыми, добавив display: block.

источник

2016-11-20 20:36:42

Спасибо за всю помощь, ссылка на другую тему помогла я просто забыл добавить в Чайлдс к mainContainer.

function createDiv(numberOfDivs) { 
    var i = 0; 
    var newElement = []; 
    var mainContainer = document.getElementById('main'); 

    for (i; i < numberOfDivs; i++) { 
    newElement[i] = document.createElement('div'); 
    newElement[i].style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 
    newElement[i].className = 'box'; 
    newElement[i].id = (i + 1); 
// newElement[i].textContent = 'this is div number: ' + (i + 1); 
    mainContainer.appendChild(newElement[i]); 
    } 
}; 

createDiv(10);

источник

2016-11-20 20:50:26 HendrikEng

JS, создающий divs с циклом for внутри контейнера

ответ

Смежные вопросы