How do I get my JavaScript to tile this table properly?

var intervalID;
function autoUpdateFeed() 
{
    if( document.autoupdatefeedform.autoupdatefeed.checked == true )
    {
        intervalID = setInterval(updateFeed, 1000);
    } else {
        clearInterval(intervalID);
    }
}
function updateFeed()
{
    var oRequest;
    try {
            oRequest=new XMLHttpReque开发者_开发技巧st();
        } catch (e)   {
        try {
            oRequest=new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
            try {
                oRequest=new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("Your browser does not support AJAX!");
                    return false;
                }
             }
        }
        oRequest.onreadystatechange=function()
    {
        if(oRequest.readyState==4)
        {
        //Start of problem.
            var newfeedstable = document.getElementById("newfeeditems");
            var newcontent = document.createElement('tr');
            newcontent.innerHTML = oRequest.responseText;
            while (newcontent.firstChild)
        {
                newfeedstable.insertBefore(newcontent.firstChild, newfeedstable.firstChild);
            }
        //End of problem.
        }
    }
    oRequest.open("GET","back/newsfeedlatest.php",true);
    oRequest.send(null);
}

Here is the JavaScript code I and my friend are currently using to add new status updates to a table for new status updates on our work-in-process social networking site, the problem is when the new elements are added to the table, they tile to the side, instead of tiling downwards, so I need to know why this is happening and how to fix it, any ideas? For more information, look at the website, you may have to make an account but feel free to use a fake email until we start using email activation again. http://friendgrid.com/ Here's a screenshot of the problem for further reference: http://dl.dropbox.com/u/2281426/Newsfeed%20Error.bmp

The issue would be at the line inside the While:

newfeedstable.insertBefore(newcontent.firstChild, newfeedstable.firstChild);

There the first parameter should be only newcontent without the .firstChild, the firstChild would be inserting only that element and not the newly created <TR>

Altough i suggest you to use DOM methods to modify tables, something easier like:

TableElement.insertRow( 0).innerHTML = oRequest.responseText;

TableElement in your case would be newfeedstable, which if you don't need it later you could reduce to:

document.getElementById("newfeeditems").insertRow( 0).innerHTML = oRequest.responseText;

The 0 as parameter would make the insert always as first row, use a -1 to insert always as last row.

Try next:

oRequest.onreadystatechange=function() {
    if(oRequest.readyState===4) {
      if(oRequest.status===200) { // HTTP OK
          //Start of problem.
          var newfeedstable = document.getElementById("newfeeditems");
          var newcontent = document.createElement('tr');
          newcontent.innerHTML = oRequest.responseText;
          // next lines removed: it's a problem: you download a <td> and next code insert its into table directly, without <tr>
          //while (newcontent.firstChild)
          //{
          //    newfeedstable.insertBefore(newcontent.firstChild,newfeedstable.firstChild);
          //}
          // 1) next line added, try next:
          newfeedstable.insertBefore(newcontent,newfeedstable.firstChild)
          // 2) OR IF RESPONSE CAN CONTAIN MORE THAN ONE <TD> try next (not checked code)
          while (newcontent.cells.length) {
            var td=newcontent.cells[0];
            newcontent.removeChild(td);
            var tr=document.createElement('tr');
            tr.appendChild(td);
            newfeedstable.insertBefore(tr,newfeedstable.firstChild);
          }
          //End of problem.
       }
    }
}