title: Adding dataTable to HTML table with JavaScript: Cannot read property 'parentNode' of null
body: <p>I am trying to make the table that I am creating on the fly with <code>JavaScript</code> into a <code>.dataTable</code>. I have compared my code to my co-workers and it is almost identical. I have made the necessary changes, but I keep getting the <code>JavaScript</code> error: "Cannot read property 'parentNode' of null" in the console. </p>
  
  <p>All of the code is executing perfectly. The new table is being displayed in the browser, but once it tries to run the line <code>$('#data').dataTable({"paging": false});</code> it gives me the error.</p>
  
  <p>Can anyone see what is causing this? Maybe a scope error, or a parentheses/bracket in wrong spot.</p>
  
  <pre><code>function Load(p1, p2) {
  
  var work= "";
  
  $('#div1').empty();
  
  var tablearea = document.getElementById('div1'),
  table = document.createElement('table');
  table.id = "data";
  table.style.fontSize = "small";
  table.width = "100%";
  
  var tbody = document.createElement('tbody');
  tbody.id = "dataTB";
  table.appendChild(tbody);
  tablearea.appendChild(table);
  
  var url = sessionStorage.baseUrl + "XXXXXXXXX";
  
  $.getJSON(url)
      .done(function (data) {
  
          var results = $.parseJSON(data);
  
          if (results != null)
          {
              for (i = 0; i &lt; results.length; i++) {
                      work += "&lt;tr&gt;&lt;td&gt;" + results.data[i].info + "&lt;/td&gt;&lt;/tr&gt;";
                  }
          }
  
          $('#dataTB').html(work);
  
          $('#data').dataTable({"paging": false});
      })
      .fail(function (jqXHR, textStatus, err) {
          alert('Error: ' + err);
  });
  }
  </code></pre>