title: javascript - getElementById returns null only for dynamically created table
body: <p>If I have only</p>
  
  <pre><code>&lt;table id='InputTable'&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and I write in console</p>
  
  <pre><code>document.getElementById('InputTable')
  </code></pre>
  
  <p>it returns</p>
  
  <pre><code>&lt;table id='InputTable'&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>as expected. However, if my HTML is</p>
  
  <pre><code>&lt;table id='InputTable'&gt;
  &lt;/table&gt;
  &lt;script type='text/javascript'&gt;
          createInputTable(3,3);
  &lt;/script&gt;
  </code></pre>
  
  <p>the same command returns <code>null</code>. The function createInputTable() is defined as:</p>
  
  <pre><code>function createInputTable(row_num, col_num, vals){
          if (typeof vals=='undefined'){
                  vals = new Array();
                  for (i=0; i&lt;row_num; i++){
                          vals[i] = Array.apply(null, Array(col_num)).map(Number.prototype.valueOf,0);
                  }
          }
          var form = document.createElement('form')
          var old_table = document.getElementById('InputTable')
          var table = document.createElement('table')
          var rows = new Array();
          var cells = new Array();
          for (i=0; i&lt;row_num; i++){
                  rows[rows.length] = table.insertRow(i);
                  cells[cells.length] = new Array();
                  for (j=0; j&lt;col_num; j++){
                          if (typeof vals[i][j]=='undefined') vals[i][j] = 0;
                          cells[i][j] = rows[i].insertCell(j);
                          cells[i][j].innerHTML = '&lt;input type="number" name="'+'a'+i+j+'" step="any" value='+vals[i][j]+' class=input_matrix /&gt;';
                  }
          }
          old_table.parentNode.replaceChild(table, old_table);
  }
  </code></pre>
  
  <p>Where is the problem?</p>