JavaScript

Question

当我点击按钮时，我只得到一个绿色的“div”。但我想只需单击一下即可获得红色、橙色和绿色的 3 个“divs”。我怎样才能做到这一点？请参阅下面的代码：

<!-- 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]);
  }
}

Answer 1

在循环内做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>

Answer 2

您不能重复使用单个元素，而是必须为循环内的每个步骤创建一个新元素。 <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>

Answer 3

我已通过语法更正更新了您的代码段。由于您要添加要追加的新元素，因此最好在循环中创建 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>

Answer 4

我认为事情可以变得更简单：

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 - .appendChild() 在循环时如何？

JavaScript - How .appendChild() while looping?

arrays

dom

loops

appendchild