title: adding css class dynamically results in undesired immediately after
body: <p>I'm adding a css class dynamically with javascript to parent div. Then, I try to add a child div inside that parent div that is styled as <code>position: absolute</code>. </p>
  
  <p>Since child div is <code>position: absolute</code> I would have expected it to show up above the content. 
  How can I get it to show above the content?</p>
  
  <p><a href="http://jsfiddle.net/w2ucD/1/" rel="nofollow">Demo1</a></p>
  
  <p><a href="http://jsfiddle.net/w2ucD/2/" rel="nofollow">Demo2</a></p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head id="Head1" runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          .parentdiv
          {
              border: 1px solid red;
              height: 100px;
              width: 150px;
              overflow: scroll;
          }
          .childdiv
          {
              position: absolute;
              border: 1px solid green;
              height: 10px;
              width: 15px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form2" runat="server"&gt;
      &lt;div id="div1" class="test"&gt;
  
          &lt;script type="text/javascript"&gt;
              var strContent = '';
              for (var i = 1; i &lt; 21; i++) {
                  document.writeln(i + '&lt;br /&gt;');
              }
          &lt;/script&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;script type="text/javascript"&gt;
  
          window.onload = function() {
              var d1 = document.getElementById('div1');
              var strContent = '';
              for (var i = 1; i &lt; 11; i++) {
                  strContent += (i + '&lt;br /&gt;');
              }
              d1.innerHTML = strContent;
  
              d1.className += (' ' + 'parentdiv');
  
              var d2 = document.createElement('div');
              d2.className = 'childdiv';
              d1.appendChild(d2);
          };
          &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>