title: Dynamic creation of table with DOM
body: <p>Can someone tell me what's wrong with this code? I want to create a table with 2 columns and 3 rows, and in the cells I want Text1 and Text2 on every row. This code creates a table with 2 columns and 3 rows, but it's only text in the cells in the third row (the others are empty).</p>
  
  <pre><code>var tablearea = document.getElementById('tablearea');
  
  var table = document.createElement('table');
  
  var tr = [];
  
  var td1 = document.createElement('td');
  var td2 = document.createElement('td');
  
  var text1 = document.createTextNode('Text1');
  var text2 = document.createTextNode('Text2');
  
  for (var i = 1; i &lt; 4; i++){
      tr[i] = document.createElement('tr');   
      for (var j = 1; j &lt; 4; j++){
          td1.appendChild(text1);
          td2.appendChild(text2);
          tr[i].appendChild(td1);
          tr[i].appendChild(td2);
      }           
      table.appendChild(tr[i]);
  
  }
  
  tablearea.appendChild(table);
  </code></pre>