javascript - 如何渲染红色框？

我想在屏幕上渲染一个红色框，单击“ 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>

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

最佳答案

      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>