我是JS的新手-所以我要求第一手的道歉。
我正在使用appendchild创建一个简单的div。 此操作由按钮执行。 问题是，每次我按下按钮，它会在前一个方块下面创建一个新的方块--而不是除此之外。 除了它，我还怎么创作？
<html>
<head>
<title>RocketSeat - Challenge 1</title>
</head>
<body>
<button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>
</body>
<script>
function MakeSquare(){
const square = document.createElement('div')
const elementBody = document.querySelector('body')
square.style.backgroundColor ='red'
square.style.width = '50px'
square.style.height = '50px'
square.style.marginTop= '50px'
square.style.border = '1px solid red'
elementBody.appendChild(square)
}
</script>
</html>
似乎是CSS（样式）问题，请尝试以下步骤:
null
<html>
<head>
<title>RocketSeat - Challenge 1</title>
</head>
<body>
<button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>
</body>
<script>
function MakeSquare() {
const square = document.createElement('div')
const elementBody = document.querySelector('body')
square.style.backgroundColor = 'red'
square.style.width = '50px'
square.style.height = '50px'
square.style.marginTop = '50px'
square.style.border = '1px solid red'
square.style.display = 'inline-block' // added display styling
elementBody.appendChild(square)
}
</script>
</html>
这是一个造型问题。 在此方案中，将样式与代码分离可能会更干净。 你可以通过给它一个类来做到这一点。 我还会命令在方块周围提供一个包装器，以便更好地控制布局。 然后，您可以通过在包装器上为它提供css变量来进一步改进定制，这样您就可以在需要时控制它的样式。 下面是一个例子:
null
const setup = () => {
makeSquare();
makeSquare();
makeSquare();
changeSquareColorToPink();
changeSquareDefaultColorToBlue();
}
function makeSquare() {
const square = document.createElement('div');
const squareWrapper = document.querySelector('.square-wrapper');
square.classList.add('square');
squareWrapper.appendChild(square)
}
function changeSquareColorToPink() {
const square = document.querySelector('.square:nth-child(1)');
square.style.setProperty('--square-color', 'pink');
}
function changeSquareDefaultColorToBlue() {
const squareWrapper = document.querySelector('.square-wrapper');
squareWrapper.style.setProperty('--square-color', 'blue');
}
window.addEventListener('load', setup).bt_makeSquare {
margin-top: 6em;
}
.square-wrapper {
--square-color: red;
--square-size: 50px;
margin-top: 2em;
}
.square {
margin: 1em;
display: inline-block;
width: var(--square-size);
height: var(--square-size);
box-sizing: border-box;
border: 1px solid var(--square-color);
background-color: var(--square-color);
}<button class="bt_makeSquare" onclick="makeSquare()">Make a square</button>
<div class="square-wrapper"></div>