DOM manipulation

create a box and put inside another box

by David McClelland

HTML

<div id="sandbox"></div>

CSS

.box {
  height: 40px;
  width: 40px;
  background-color: yellow;
  z-index: 1;
  margin: 10px;
}

#sandbox {
  background-color: black;
  width: 300px;
  height: 200px;
  display: flex;
}

JavaScript

const sandbox = document.querySelector('#sandbox');
  
const makeABox = () => {
newElement = document.createElement('div');
newElement.className = 'box';
  sandbox.appendChild(newElement);
}

makeABox();