title: set a newly created div on top of the older divs
body: <p>I have a bunch of divs inside a container. The position of the content divs is relative, because I want them to appear one below the other and their height is unknown.</p>
  
  <p>These divs are created dynamically (appendchild) inside the container div. Now, each div appears on the end (bottom) of the stack but my requirement is that the divs have a "newest first" option too, that is, each new div appears on top, not on bottom of the content divs (if the user selects the "newest first" in the settings).</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="div1" class="content"&gt;aaa&lt;br&gt;aaa&lt;/div&gt;
      &lt;div id="div2" class="content"&gt;bbb&lt;br&gt;&lt;br&gt;bbb&lt;/div&gt;
      &lt;div id="div3" class="content"&gt;ccc&lt;/div&gt;
      &lt;div id="div4" class="content"&gt;ddd&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.container {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      border: 1px solid red;
  }
  
  .content {
      position: relative;
      top: 0px;
      left: 5px;
      width: 200px;
      height: auto;
      border: 1px solid blue;
      margin: 3px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/jk559/1/" rel="nofollow">http://jsfiddle.net/jk559/1/</a></p>
  
  <p>so I'd like the end-user visible order to be: div4, div3, div2, div1.</p>
  
  <p>How can I achieve this? (css/js)</p>
  
  <p>preferrably no jquery.</p>
  
  <p>thanks in advice!</p>