title: CSS doesn't work when dynamically adding elements to page using javascript
body: <p>I want to dynamically add news updates to a page.
  When you log in, you get 20 news items. Scroll down to the bottom and there's a "more" button. Click it and some ajax fetches 20 more in json form from the server. Javascript parses the json into name, date, comment, pic etc.</p>
  
  <p>the good news is that it kind of works. I can make text nodes for each name date comment etc. and add them to a id="more" div, and it all comes out in a blurb.</p>
  
  <p>how do I get it into the same format as the surrounding divs?
  I'll make this as brief as possible...</p>
  
  <p>three column layout, inside three column layout...</p>
  
  <pre><code>&lt;div class="wrapper threecol"&gt;
  &lt;div class="colmid"&gt;
      &lt;div class="colleft"&gt;
          &lt;div class="col1"&gt;
              &lt;div class="friends"&gt;   
              &lt;div class="colwrap st-leftmenu"&gt;
                  &lt;c:forEach var="st" items="${news}"&gt;
                  &lt;div class="st-colleft"&gt;
                  &lt;div class="st-col1"&gt;
                  &lt;div class="statusName"&gt;
                      ${st.name}
                  &lt;/div&gt;
                          &lt;%-- date, comment, pic etc. omitted --%&gt;
  
                  &lt;/div&gt; &lt;%-- end st-col2 --%&gt;
                  &lt;/div&gt; &lt;%-- end div class st-colleft --%&gt; 
                  &lt;/c:forEach&gt;
                  &lt;/div&gt; &lt;%-- end div class colwrap st leftmenu --%&gt;
  
                          &lt;%-- add new stuff here dynamically --%&gt;
                  &lt;div id="showExtra"&gt;&lt;/div&gt;
  
                  &lt;a href="javascript:void(0)" onclick="moreStatus()"&gt;get more&lt;/a&gt;
              &lt;/div&gt; &lt;%-- end div class friends --%&gt;
              &lt;/div&gt; &lt;%-- end col1 --%&gt;
  </code></pre>
  
  
  
  <p>I'm trying to add to the id="showExtra" div, which partly works as above.
  I tried creating a complicated nested div structure in js. that got me part of the way there, but that can't be the way to do it... 
  it's a bit of a mess, sorry...</p>
  
  <pre><code>function showMoreStatus(){
  var moreDiv = document.getElementById('showExtra'); 
  
  var moreJSON = new Array();
  
  if(request.readyState == 4) {
      if (request.status == 200) {
          moreJSON = eval('(' + request.responseText + ')');
          for(var i=0; i&lt;moreJSON.length; i++) {              
              //get values from JSON
              var JSONName = moreJSON[i][2];
                              // and others...
  
              //create text nodes, a href and img
              var nameTextNode = document.createTextNode(JSONName);
                              // and other nodes, imgs, hrefs etc...
  
                              // surely this is NOT the way to do it!             
              //column divs
              var outColDiv = document.createElement("div");
              outColDiv.setAttribute("class", "col1");
              var friendsDiv = document.createElement("div");
              friendsDiv.setAttribute("class", "friends");
              var colLeftDiv = document.createElement("div");
              colLeftDiv.setAttribute("class", "st-colleft");
              var col1Div = document.createElement("div");
              col1Div.setAttribute("class", "st-col1");
              var col2Div = document.createElement("div");
              col2Div.setAttribute("class", "st-col2");
              colLeftDiv.appendChild(col1Div);
              colLeftDiv.appendChild(col2Div);
              friendsDiv.appendChild(colLeftDiv);
              outColDiv.appendChild(friendsDiv);
  
  
  
              var nameDiv = document.createElement("div");
              nameDiv.setAttribute("class", "statusName");
                              // and others...
  
              // append nodes to divs
              nameDiv.appendChild(nameTextNode);
  
              col1Div.appendChild(nameDiv);
              col1Div.appendChild(dateDiv);
              col1Div.appendChild(contentDiv);
  
              // append the page
              moreDiv.appendChild(outColDiv);
          }
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Gah! Thanks for reading this far.</p>
  
  <p>Well, that wasn't brief at all really.
  In fact, it's probably unnecessary.</p>
  
  <p>What's the correct approach here?
  How can I get nameTextNode and all his friends to sit in the same place as ${st.name}?</p>