title: appendChild to animate divs showing only the top div
body: <p>I thought I could use <code>appendChild</code> to simulate an animation.  All the divs in a container are hidden except for the first-child.  Here is my code so far, I am not sure why it stops after displaying the second div.</p>
  
  <p>Fiddle:  <a href="http://jsfiddle.net/dFzA7/" rel="nofollow">http://jsfiddle.net/dFzA7/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div&gt;One&lt;/div&gt;
    &lt;div&gt;Two&lt;/div&gt;
    &lt;div&gt;Three&lt;/div&gt;
    &lt;div&gt;Four&lt;/div&gt;
    &lt;div&gt;Five&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container div {
    display: none;
    border: 1px solid #000000;
    width: 100px;
    padding: 40px 0;
    text-align: center;
    margin: 0 auto;
  }
  
  .container div:first-child {
    display: block;
  }
  </code></pre>
  
  <p>JavaScript: </p>
  
  <pre><code>function animateIt () {
    var container = document.querySelector('.container');
    var box = document.querySelector('.container div');
  
    container.appendChild(box);
  
  };
  
  setInterval( animateIt(), 1000 );
  </code></pre>