title: Append child not working
body: <p>I'm trying to append a div to an un-ordered list but the div appended and previously created has trouble showing up. Any ideas why?</p>
  
  <p>Thanks so much to anyone who can help!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button type="button" id="buttonone" class="add"&gt;&lt;b&gt;&lt;span&gt;Add&lt;/span&gt;&lt;/b&gt;
  &lt;/button&gt;
  &lt;ul id = "all"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#woow{
      height: 50px;
      width: 50px;
      background-color: red;
  }
   #buttonone {
       opacity: 0;
       position: relative;
       left: 78%;
       top: 23px;
       font-family:"Roboto";
       height: 38px;
       width: 100px;
       background-color: #5dade2;
       color: white;
       border-radius: 2px;
       font-size: 22px;
       outline: 0px solid transparent;
       border: 0px solid transparent;
       -webkit-transition: all 0.15s linear;
       -moz-transition: all 0.15s linear;
       transition: all 0.15s linear;
   }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#text').fadeTo(0, 1);
  $('#text').addClass('box animated bounceInDown');
  setTimeout(function()
  {
      $('#buttonone').fadeTo(0, 1);
      $('#buttonone').addClass('box animated bounceInDown');
  }, 100);
  $('#buttoneone').click(function(){
      var list = document.getElementById('all');
      var div = document.createElement('div');
      div.id = "woow";
      list.appendChild(div);
  });
  </code></pre>