title: Nesting dynamic links into a dynamic list with Javascript
body: <p>I have tried to create a function that creates a dynamic menu. Ive been able to create the "a" tags and give them individual links while also assigning them ID's. The problem is that I cant get the links inside of a list where my CSS applies its rules. </p>
  
  <pre><code>function write_navBar() {
  var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"]
  var ul = document.createElement("ul");
  document.getElementById("mainNav").appendChild(ul);
  for (i = 0 ; i &lt; links.length ; i++) {
      var ul = document.createElement("ul");
      var a = document.createElement("a");
      var text = document.createTextNode(links[i]);
  
      a.href = links[i];
      a.id = "mainNav";
      a.text = links[i];
  
      document.getElementById("mainNav").appendChild(a);
                                      }
  }
  </code></pre>
  
  <p>Any suggestions on cleaning the code while keeping to javascript would be appreciated. And also any explanation of syntax would be also appreciated.  </p>
  
  <p>Thank you!</p>