Create multiple divs with for loop

Question

This is a very simple question, but I do not know why it does not work. I have an array with 3 elements inside. And I have a container in which I would like to insert several divs based on the number of elements in my array. I used a for loop for this, but it creates only one div. If he does not create 3?

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

here is the fiddle to demonstrate fiddle again

Answer 1

Move container from the loop, it is not necessary.

Attach innerHTML to each iteration.

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

Edit:

Thanks to Canon for your comments. I also wanted to suggest the same approach as yours, but I did some other work after posting the answer [No excuse :)] Update 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 including more lines of code, but it will be more efficient and less error prone than the previous solution.

Answer 2

Replace = with +=

According to @canon's comment, the edited answer is below

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

Answer 3

Replace it

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

with this

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

Answer 4

If you want to create more than one, you must call createElement more than once.

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

If you invoke the appendChild command on an element that is already in the DOM, it is moved, not copied.

 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"; } } } } 

Answer 5

Javascript Method -

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

JQuery Method -

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

Answer 6

For further reference; how about this approach? :)

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