<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script type="text/javascript">
      var next = 0;

      function addVisibleBox() {
        var box = document.createElement('DIV');
        box.id = 'box' + next++;
        box.className = 'redbox';
        box.style.width = '150px';
        box.style.height = '150px';
        box.style.backgroundColor = 'red';
        box.style.border = '1px solid black';
        box.style.margin = '5px';
        box.style.visibility = 'visible'

        window.setTimeout(function() {
          document.body.appendChild(box);
        }, 1000);
      }

      function addHiddenBox() {
        var box = document.createElement('DIV');
        box.id = 'box' + next++;
        box.className = 'redbox';
        box.style.width = '150px';
        box.style.height = '150px';
        box.style.backgroundColor = 'red';
        box.style.border = '1px solid black';
        box.style.margin = '5px';
        box.style.visibility = 'hidden';

        window.setTimeout(function() {
          document.body.appendChild(box);
        }, 1000);
      }
    </script>
  </head>
  <body>
    <input id="addVisible" type="button" value="Add a visible box!" onclick="addVisibleBox()"/>
    <input id="addHidden" type="button" value="Add a hidden box!" onclick="addHiddenBox();" />
  </body>
</html>