What is it about this Javascript code that causes it to correctly generate a table in IE?

Question

What is it about this source code that causes it to actually generate a table in IE instead of just doing nothing.

  function generateATable()
  {
   tableContainer = document.getElementById("tableDiv");
   var tableElement = document.createElement("table");

   // Append the Table Element to the table 
   // container.
   tableContainer.appendChild(tableElement);

   // IE Requires a TBODY when dynamically generating 
   // tables.  (I thought this was it but apparently it isn't)
   var tbodyElement = document.createElement("tbody");

   // First we'll append the tbody.
   tableElement.appendChild(tbodyElement);

   var trElement1 = document.createElement("tr");

   // Next we'll append the first trElement to the 
   // tbody.
   tbodyElement.appendChild(trElement1);

   var aaCell = trElement1.insertCell(-1);
   var abCell = trElement1.insertCell(0);

   var textNodeAA = document.createTextNode("AA");
   var textNodeAB = document.createTextNode("AB");

   aaCell.appendChild(textNodeAA);
   abCell.appendChild(textNodeAB);

   tbodyElement.appendChild(trElement1);

   var baCell = trElement1.cells[0].cloneNode(false);
   var bbCell = trElement1.cells[1].cloneNode(false);

   var textNodeBA = document.createTextNode("BA");
   var textNodeBB = document.createTextNode("BB");

   trElement2 = trElement1.cloneNode(false);

   tbodyElement.appendChild(trElement2);

   baCell.appendChild(textNodeBA);
   bbCell.appendChild(textNodeBB);

   trElement2.appendChild(baCell);
   trElement2.appendChild(bbCell);

   tableElement.style.border="4px solid black";

  }

Answer 1

                    tableContainer = document.getElementById("tableDiv");
                    var tableElement = document.createElement("table");

                    // Append the Table Element to the table 
                    // container.
                    tableContainer.appendChild(tableElement);

That's about it. The rest is actually populating the table.

We find a div in the existing HTML document called "tableDiv", and then we create a <table> element, and add it to tableDiv.

Answer 2

document.createElement("table")
  ...
tableContainer.appendChild(tableElement);

That adds a element to the DOM.

Answer 3

Creating a table which can be seen on the page consists of two steps — creating the table node:

var tableElement = document.createElement("table");

…and adding it as the child of a node which is in the document:

tableContainer = document.getElementById("tableDiv");
tableContainer.appendChild(tableElement);

Answer 4

I'm not sure why you're downvoting everyone who has answered correctly. Do you want a line-by-line description of what the code is doing?

function generateATable() {
    /* obtain a reference to a div */
    tableContainer = document.getElementById("tableDiv");
    /* create a table element */
    var tableElement = document.createElement("table");

    // Append the Table Element to the table 
    // container.
    /* append the table element to the div */
    tableContainer.appendChild(tableElement);

    // IE Requires a TBODY when dynamically generating 
    // tables.  (I thought this was it but apparently it isn't)
    /* create a tbody element */
    var tbodyElement = document.createElement("tbody");

    // First we'll append the tbody.
    /* append the tbody element to the table element */
    tableElement.appendChild(tbodyElement);

    /* create a row element */
    var trElement1 = document.createElement("tr");

    // Next we'll append the first trElement to the 
    // tbody.
    /* append the row element to the tbody element */
    tbodyElement.appendChild(trElement1);

    /* insert two cells */
    var aaCell = trElement1.insertCell(-1);
    var abCell = trElement1.insertCell(0);

    /* create two text nodes */
    var textNodeAA = document.createTextNode("AA");
    var textNodeAB = document.createTextNode("AB");

    /* append the text nodes to the cells */
    aaCell.appendChild(textNodeAA);
    abCell.appendChild(textNodeAB);

    /* append the row element to the tbody element ... again */
    tbodyElement.appendChild(trElement1);

    /* create two new cells that are shallow copies of the two cells above */
    var baCell = trElement1.cells[0].cloneNode(false);
    var bbCell = trElement1.cells[1].cloneNode(false);

    /* create two more text nodes */
    var textNodeBA = document.createTextNode("BA");
    var textNodeBB = document.createTextNode("BB");

    /* create a row element that is a shallow copy of the first row */
    trElement2 = trElement1.cloneNode(false);

    /* append the 2nd row element to the tbody element */
    tbodyElement.appendChild(trElement2);

    /* append the text nodes to the cells */
    baCell.appendChild(textNodeBA);
    bbCell.appendChild(textNodeBB);

    /* append the cells to the 2nd row element */
    trElement2.appendChild(baCell);
    trElement2.appendChild(bbCell);

    /* set the border style of the table element */
    tableElement.style.border="4px solid black";
}

Answer 5

My apologies...it's a problem with something else...the data that was creating the table wasn't filling in, votes back up for everyone...sorry!...