[SOLVED] Remove White Space after appending Childs

[fry2010]

I have a problem with removing and then appending childs.

 

Basically what im doing is removing nodes from a <table> then re-inserting the content every second.

Its all working , except everytime the nodes are removed the data inside the table moves down a couple of pixels everytime, so by the end of say a miniute the text is a long way down with a load of white space above it.

 

I know that it has something to do with removing the elements and nodes correctly, because it must be leaving some elements there, which is what might be causing this.

 

Here is the function that constructs this table list:

 

  this.create = function(str)
  {
    var self = populate_arena;
    var response = str.split(',');
    var list = self.list;
    var array_length = response.length - 1;
    var i = 0;
    var td = list;
    var tr = list;


    // THIS REMOVES ANY CHILD NODES IF THEY ARE THERE....
    if ( list.hasChildNodes() )
    {
      while ( list.childNodes.length >= 1 )
      {
          list.removeChild( list.firstChild );       
      } 
    }


    //THIS CREATES THE CHILD NODES WITH TEXT INSIDE TOO
    for(i = 0; i < array_length; i++)
    {
      var tr = list.appendChild(document.createElement('tr'));
      td = tr.appendChild(document.createElement('td'));
      td.idName = response[i];
      td.appendChild(document.createTextNode(response[i]));
    }

  };

 

here is the html code:

 

    <table id="list">
    //EVERYTHING GOES INSIDE THIS...
    </table>

 

Now here is an example of what happens:

 

After 1 second passes:

 

<h1>TITLE</h1>

<table>

  <tr>

    <td>Hello</td>

  </tr>

</table>

 

this prints this:

 

TITLE

Hello

 

After another second the hello moves down like so:

 

TITLE

 

Hello

 

Then after say a miniute its like this:

 

TITLE

 

 

 

 

 

 

 

Hello

 

 

So it moves down because something must be there left over from deleting. Anyone know what could be causing this? thanks.