JSFiddle - React, Tailwind, and code Playground

by Aaron Bird

HTML

<button class="add-square">add</button>
<button class="remove-space">remove space</button>
<button class="direct-add-square">direct add</button>
<artical class="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
<artical>

CSS

button {
  display: block;
  width: 100px;
  height:20px;
  margin: 20px 0;
}

div {
  display:inline-block;
  background: yellow;
  width: 50px;
  height: 50px;
  border: 2px solid black;
  vertical-align: top;
}

JavaScript

var mainElement = document.querySelector('.main');
var counter = 4

function addSquare() {
  var divElement = document.createElement('div');
  divElement.textContent = counter++;
  mainElement.appendChild(divElement);
  // mainElement.innerHTML += ' ';
}
document.querySelector('.add-square').addEventListener('click', addSquare);

function removeSpace() {
	var divQueue = mainElement.querySelectorAll('div');
  for (let i of divQueue) {
  	mainElement.appendChild(i);
  }
}
document.querySelector('.remove-space').addEventListener('click', removeSpace);

function directAddDiv() {
	var divElement = document.createElement('div');
  divElement.textContent = counter++;
	mainElement.innerHTML +='<div></div> <div></div> ';
}
document.querySelector('.direct-add-square').addEventListener('click', directAddDiv);