title: Why can't I appendChild my list item
body: <p>I am trying to get my Events' name shown accordingly in the Calendar. The names are all retrieved from local storage. However, I can't seem to append the name to the months div. While debugging, it said "cannot read property of 'appendChild' of null".</p>
  
  <p>Here are my codes:</p>
  
  <pre><code>&lt;table border="1" id="list" style="width:40%"&gt;
   &lt;caption style="text-align:center; margin:5px; font-weight:bold; font-size:30px; margin-bottom:10px"&gt;
       LIST OF EVENTS 
  &lt;/caption&gt;
  
  
  &lt;tr&gt;&lt;th&gt;Month&lt;/th&gt;&lt;th&gt;Events Name&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;January&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="jan"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;February&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="feb"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;March&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="mar"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;April&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="apr"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;May&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="may"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;June&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="jun"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;July&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="july"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;August&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="aug"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;September&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="sept"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;October&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="oct"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;November&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="nov"&gt;
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;December&lt;/td&gt;
  &lt;td&gt;
  &lt;ul id="dec"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt; 
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>var retrieve=localStorage.getItem("CreateEvent");
          var events=JSON.parse(retrieve);
  
      function addToCalendar(events) {
          var monthIds = ["jan", "feb", "mar", "apr", "may", "jun", "july", "aug", "sept", "oct", "nov", "dec"];
          var index;
  
          for (index = 0; index &lt; events.length; ++index) {
              var entry = events[index];          
              var dateOfEvent = new Date(entry.date);
              var monthOfEvent = dateOfEvent.getMonth();
  
            var listitem=document.createElement("LI");
            var entryMarkup = document.createTextNode(entry.name);
            listitem.appendChild(entryMarkup);
            var monthElement = document.getElementById(monthIds[monthOfEvent]);
            monthElement.appendChild(listitem);
          }
      }
  </code></pre>