AppendChild besides another element
Question
I'm a JS newbie - so I ask for apologies in first hand.
I'm using appendchild to create a simples div. This action is made from a button. The problem is that everytime I press the button, it creates a new square BELOW the previous one - not besides. How do I do to create besides it?
<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>
2 answers
solution1
1 2020-08-02 12:30:35
Seems like a CSS (styling) issue, try this:
<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>
solution2
0 2020-08-02 13:33:21
This is a styling issue. It might be cleaner to separate the styling from the code in this scenario. You can do this by giving it a class. I would also command to provide a wrapper around the squares to give you better control over the layout. You could then further improve the customization by giving it css variables on the wrapper so you have control on the it's styling if you ever need to. here's an example:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.