title: Making a nested unordered list using javascript
body: <p>I want to add specific event messages given from &quot;calendar_msgs&quot; under specific months. For example, under January, I want to put the specific info that calendar_msgs has for the month January which is &quot;Сайхан амарна&quot; with a nested style and the same approach should go for all the other months. I tried to make a nested list but there seems to be a problem.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var monthNames = ["January ", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var daysOfTheWeek = ["S", "M", "T", "W", "T", "F", "S"]
  
  var d = new Date();
  var year = d.getFullYear();
  
  var curMonth = d.getMonth();
  var today = d.getDate();
  
  var calendar_msgs = {
    jan: {
      1: "Сайхан амарна"
    }, // Event info for January that has to be under January etc.
    feb: {
      1: "Сагсны тэмцээнтэй",
      3: "Шагнал гардуулна даа",
      17: "Жавхлан багшийн лаб 2-ыг хийнэ"
    },
    mar: {
      2: "Энэ лабынхаа хугацааг сунгах уу яах вэ гэдэгээ шийднэ",
      6: "Энд юу бичье дээ байз",
      8: "Эмэгтэйчүүддээ баяр хүргэнэ дээ"
    },
    apr: {
      1: "Бүгдээрээ худлаа ярьцаагаагаарай"
    },
    may: {
      10: "Энэ сард ч ёстой юу ч болдоггүй сар даа"
    },
    jun: {
      6: "Жавхлан багшийн төрсөн өдөр"
    },
    jul: {
      4: "Хичээл амарсаан ураа"
    },
    aug: {
      1: "Хөдөө явдаг цаг даа",
      25: "Хичээл сонголт эхэллээ"
    },
    sep: {
      1: "9-н сарын нэгэн боллоо ерөөсөө бидний баяр даа"
    },
    oct: {
      13: "Сур сур бас дахин сур"
    },
    nov: {
      2: "Сурсаар л бай"
    },
    dec: {
      20: "Өвлийн семистер хаагдах нь дээ",
      30: "Дүн гаргаж дууслаа баярлалаа баяртай"
    }
  }
  
  function eventList() {
  
    var ul = document.createElement('ul');
    var list = document.getElementById("events");
    list.appendChild(ul);
    var listItem;
    var listItem2;
    var breakItem;
    for (i = 0; i &lt; 12; ++i) {
      listItem = document.createElement('li');
      breakItem = document.createElement('br');
  
      if (monthNames[i] == 1) {
        listItem.innerHTML = calendar_msgs.jan[1];
        ul.appendChild(listItem);
        ul.appendChild(breakItem);
      }
      listItem.innerHTML = monthNames[i];
      ul.appendChild(listItem);
      ul.appendChild(breakItem);
    }
  }
  
  eventList();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 id="year"&gt;2021 Calendar&lt;/h1&gt;
  &lt;div class="calendar"&gt;
  &lt;/div&gt;
  &lt;div id="events"&gt;
    &lt;h2 id="eventText"&gt;Events&lt;/h2&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>