title: What are the advantages and disadvantages of these methods of creating tables with JavaScript?
body: <p>I found two ways to create a table in JS:</p>
  
  <ol>
  <li><p>Using <code>insertRow</code> and <code>insertCell</code>:</p>
  
  <pre><code>var table = document.getElementById ("table");
  var row = table.insertRow (1);
  var cell = row.insertCell (0);
  cell.innerHTML = "New row";
  </code></pre></li>
  <li><p>Using plain DOM operations:</p>
  
  <pre><code>var tbl     = document.createElement("table");
  var tblBody = document.createElement("tbody");
  
  // creating all cells
  for (var j = 0; j &lt; 2; j++) {
    // creates a table row
    var row = document.createElement("tr");
  
    for (var i = 0; i &lt; 2; i++) {
      // Create a &lt;td&gt; element and a text node, make the text
      // node the contents of the &lt;td&gt;, and put the &lt;td&gt; at
      // the end of the table row
      var cell = document.createElement("td");
      var cellText = document.createTextNode("cell is row "+j+", column "+i);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }
  
    // add the row to the end of the table body
    tblBody.appendChild(row);
  }
  </code></pre></li>
  </ol>
  
  <p>The first as I see is specially created for the table, but the second is mentioned on MDN, so I'm a bit confused what methods to use. What are the advantages and disadvantages of each? When is one used over another?</p>