javascript - 我怎样才能渲染一个红色的盒子？

Question

我想在我的屏幕上渲染一个红色框，点击“Criar quadrado”按钮。我的代码可以做到，但只能做到一次。我想在每次点击时呈现一个红色框。那是我的代码:

//Crie um botão que ao ser clicado cria um novo elemento em tela com a forma de um quadrado
//vermelho com 100px de altura e largura. Sempre que o botão for clicado um novo quadrado deve
//aparecer na tela.

function criarQuadrado() {
  var boxElement = document.querySelector(".box");

  boxElement.style.width = 300;
  boxElement.style.height = 300;
  boxElement.style.backgroundColor = "#f00";
}

<div class="box"></div>
<button onclick="criarQuadrado()">Criar quadrado</button>

它呈现，但我想在每次单击时并排放置另一个框。我该怎么做？

Answer 1

      function criarQuadrado() {
        var boxElement = document.createElement("div")
    
        boxElement.style.width = "30px";
        boxElement.style.height = "30px";
        boxElement.style.display = "inline-block";
        boxElement.style.backgroundColor = "#f00";
        
        var container = document.getElementById("container")
        container.appendChild(boxElement)
      }

<div id="container"></div>
<button type="button" onclick="criarQuadrado()">Click me</button>