Creating a table dynamically using Javascript

Question

I am trying to create a table dynamically as soon as a page loads. In the code below, I get a response when I click the button, but the table is not displayed on the page. What's wrong with the code below? I have looked at other discussion threads on this topic, but none have helped.

The code in the Javascript file is as follows:

    function showalert() {
            alert('what?');
    }

    function displayGuides() {
            var mgdCell, mgdRow, mgdTable;

      mgdTable = document.createElement('table');
      mgdRow = mgdTable.insertRow(0);
      mgdCell = mgdRow.insertCell(0);
      mgdCell.innerHTML = "1111";
      mgdCell = mgdRow.insertCell(1);
      mgdCell.innerHTML = "2222";
      mgdCell = mgdRow.insertCell(2);
      mgdCell.innerHTML = "3333";
      mgdCell = mgdRow.insertCell(3);
      mgdCell.innerHTML = "4444";
      mgdCell = mgdRow.insertCell(4);
      mgdCell.innerHTML = "5555";
      document.getElementByID('mgdTable').appendChild(mgdTable);
    }

    function mgdUserActions() {
      var create = document.getElementById('create');
      create.onclick = showalert;
      displayGuides();
    }

    window.onload = mgdUserActions;

Answer 1

Your call in displayGuides to document.getElementByID should be document.getElementById . The 'D' in ID should be 'd' Id .

Check out the fiddle of awesomeness