<div id="stage" class="stage"></div>
<button id="button">Magic Trick</button>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  
  height: 100%;
}

.stage {
  display: grid;
  align-content: center;
  width: 200px;
  height: 150px;
  
  padding: 25px;
  margin-bottom: 15px;
  
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(155,155,155,0.2)
}

const $button = document.getElementById('button')
const $stage = document.getElementById('stage')

$button.addEventListener('click', function () {
  $stage.innerHTML = '<p>Abra cadabra...</p>'
  
  setTimeout(function () {
    $stage.innerHTML += '<p>...</p>'
  }, 1000)
  
  setTimeout(function () {
    $stage.innerHTML += '<h1><em>Tada!</em></h1>'
  }, 2000)
})