Создать несколько div с помощью цикла for

Это очень простой вопрос, но я не знаю, почему он не работает. У меня есть массив с 3 элементами внутри. И у меня есть контейнер, в который я бы хотел вставить несколько div, исходя из количества элементов в моем массиве. Я использовал цикл for для этого, но он создает только один div. Если он не создает 3?

for (var i = 0; i < array.length; i++) {
   var container = document.getElementById("container");
   container.innerHTML = '<div class="box"></div>';
}

вот скрипка, чтобы еще раз продемонстрировать fiddle

Ответ 1

Переместите container из цикла, в нем нет необходимости.

Приложите innerHTML к каждой итерации.

var container = document.getElementById("container");
for (var i = 0; i < array.length; i++) {
   container.innerHTML += '<div class="box"></div>';
}

Изменить:

Спасибо Canon, за ваши комментарии. Я также хотел предложить тот же подход, что и ваш, но я занялся какой-то другой работой после публикации ответа [Нет оправданий:)] Обновление ответа:

var htmlElements = "";
for (var i = 0; i < array.length; i++) {
   htmlElements += '<div class="box"></div>';
}
var container = document.getElementById("container");
container.innerHTML = htmlElements;

Это может выглядеть как включение большего количества строк кода, но это будет более эффективным и менее подверженным ошибкам, чем предыдущее решение.

Ответ 2

Замените = на +=

В соответствии с комментарием @canon, отредактированный ответ ниже

var innerHTMLString = "";  
forloop {
    innerHTMLString += '<div class="box"></div>';
}
document.getElementById("htmlElements").innerHTML = innerHTMLString

Ответ 3

Замените это

container.innerHTML = '<div class="box"></div>';

с этим

container.innerHTML += '<div class="box"></div>';

Ответ 4

Если вы хотите создать более одного, вы должны вызвать createElement более одного раза.

d=document.createElement("div");
line into the j loop.

Если вы вызываете команду appendChild в элементе, который уже находится в DOM, он перемещается, а не копируется.

window.onload=function()
{
    var i=0;
    var j=0;

    for (i=1; i<=8; i++)
    {
        for (j=1; j<=8; j++)
        {
            if ((i%2!=0 && j%2==0)||(i%2==0 && j%2!=0))
            {
                var d=document.createElement("div");
                document.body.appendChild(d);
                d.className="black";
            }
            else
            {
                var d=document.createElement("div");
                document.body.appendChild(d);
                d.className="white";
            }
        }
    }
}

Ответ 5

Метод Javascript -

var container = document.getElementById("container");
for (var i = 0; i < array.length; i++) {
    container.innerHTML += '<div class="box"></div>';
}

Метод jQuery -

foreach(array as value){
    $("#container").append('<div class="box"></div>')
}

Ответ 6

Для дальнейших ссылок; как насчет этого подхода? :)

HTML:

<div class="particles">
   <div class="parts"></div>
</div>

JavaScript:

// Cloning divs where particles go in order not to put 300 of them in the markup :)

 const node = document.querySelector(".parts");
 [...Array(300)].forEach(_ =>
 node.parentNode.insertBefore(node.cloneNode(true), node)
 );