我有此代码，每次单击按钮时，该代码应添加一个红色正方形的div。碰巧它添加了我想要的div 1单击是，然后单击1否。这是代码：
<head>
<title>curso de js</title>
</head>
<body>
<div id="app">
<input type="text" name="nome" id="nome" />
<button class="botao">Adicionar</button>
</div>
<script>
var btnElement = document.querySelector('button');
console.log(btnElement);
btnElement.onclick = function()
{
var index = 0;
var squareElementCreator = document.createElement('div');
squareElementCreator.setAttribute('class', 'box');
var containElement = document.querySelector('#app');
containElement.appendChild(squareElementCreator);
var squareElement = document.querySelectorAll('.box');
console.log(squareElement[index]);
squareElement[index].style.width = "100px";
squareElement[index].style.height = "100px";
squareElement[index].style.backgroundColor = '#f00';
squareElement[index].style.margin = '10px';
//console.log(squareElement);
var container = document.querySelector('#app');
container.appendChild(squareElement[index]);
index++;
}
</script>
</body> ```
var btnElement = document.querySelector('button');
var containElement = document.querySelector('#app');
btnElement.addEventListener('click', function () {
var squareElement = document.createElement('div')
squareElement.className = 'box'
squareElement.style.width = "100px";
squareElement.style.height = "100px";
squareElement.style.backgroundColor = '#f00';
squareElement.style.margin = '10px';
containElement.appendChild(squareElement)
})