JavaScript-回圈時如何.appendChild()？

當我點擊按鈕時，我只得到一個綠色的“div”。但我希望只需單擊一下即可獲得紅色、橙色和綠色的 3 個“div”。我怎樣才能做到這一點？請參閱下面的代碼：

<!-- HTML CODE -->
<section id="container"></section>
<button onclick="myFunc()">BUTTON 1</button>


// JavaScript Code
function myFunc()
{
  var container = document.getElementById("container");
  var newDiv = document.createElement("div");

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

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

uj5u.com熱心網友回復：

document.createElement在回圈內執行：

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>

uj5u.com熱心網友回復：

您不能重用單個元素，而是必須為回圈內的每個步驟創建一個新元素。并且 a<div>需要一些大小或一些內容才能實際出現。
因此，最小的更改可能是帶有注釋的 3 行：

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>

uj5u.com熱心網友回復：

我已通過語法更正更新了您的代碼段。由于您要添加要附加的新元素，因此最好在回圈中創建 div 元素。

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>

uj5u.com熱心網友回復：

我認為事情可以變得更簡單：

const container = document.getElementById("container"),
  colorArray = ["red", "orange", "green"];
function myFunc() {
  for (let color of colorArray) {
    container.insertAdjacentHTML(
      "afterend",
      `<div style="background-color:${color};">New div colored ${color}</div>`
    );
  }
}

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

標籤：javascript 数组 循环 dom 附子

上一篇：Elasticsearch顯示匹配只有.raw的特殊字符

下一篇：如何在Python中進行for和while回圈以獲得相同的答案？