create multiple divs using a for loop

Move container out of the loop, it is not required inside it.

Append the innerHTML in each iteration.

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

Edit:

Thanks Canon, for your comments. I also wanted to suggest the same approach as yours, but I got busy in some other work after posting the answer [No excuses :)] Updating the answer:

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

This may look like involving more lines of code but this will be more efficient and less error-prone than the previous solution.


Replace this

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

with this

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

Replace = to +=

As per the @canon comment, edited answer are below

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