JavaScript - How .appendChild() while looping?

function myFunc() {
  var container = document.getElementById("container");
  const colorArray = ["red", "orange", "green"];
  var divArray = [];

  for (var i = 0; i < 3; i++) {
    var newDiv = document.createElement("div");
    newDiv.classList.add("new-div")
    divArray.push(newDiv);
    var temp = divArray[i];
    temp.setAttribute("style", "background-color: " + colorArray[i]);
    container.appendChild(divArray[i]);
  }
}

.new-div {
  outline: 1px solid salmon;
  height: 50px;
  width: 50px;
}

<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>

tevemadarAnswered 1 years ago · Answer 2

You can't reuse a single element, instead you have to create a new one for each step inside the loop. And a <div> needs either some size or some content to actually appear.
So the minimal changes could be the 3 lines with comments:

function myFunc()
{
  var container = document.getElementById("container");
  //var newDiv = document.createElement("div"); // <-- you can't reuse

  const colorArray = ["red", "orange", "green"];
  var divArray = [];

  for (var i = 0; i < 3; i++)
  {
      var newDiv = document.createElement("div"); // <-- have to create a new one
      newDiv.innerHTML="&nbsp;"; // <-- a completely empty, dimensionless div won't appear
      divArray.push(newDiv);
      var temp = divArray[i];
      temp.setAttribute("style", "background-color: "+ colorArray[i]);
      container.appendChild(divArray[i]);
  }
}

<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>

MetabolicAnswered 1 years ago · Answer 3

I have updated your snippet with syntax correction. Since you are adding new elements to be appended, it's better to create the div element within the loop.

function myFunc() {
  var container = document.getElementById("container");

  const colorArray = ["red", "orange", "green"];
  var divArray = [];

  for (var i = 0; i < 3; i++)

  {
    var newDiv = document.createElement("div");

    newDiv.textContent = i;
    divArray.push(newDiv);

    newDiv.setAttribute("style", "background-color: " + colorArray[i]);

    container.append(newDiv);
  }
}

<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>

JavaScript - How .appendChild() while looping?

Write an answer

Recent Questions on javascript

Programming Languages

JavaScript - How .appendChild() while looping?

Write an answer

Questions related to 'JavaScript - How .appendChild() while looping?'

Recent Questions on javascript

Programming Languages