title: Adding a <li> to a <ul>-object in javascript
body: <p>I'm trying to create  a function in which a user clicks a button in order to add an item to an unordered list of items (without using jQuery). This is my js code:</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>window.onload = function(){
      document.body.addEventListener("click", function(event) {
       if (event.target.id == "add-item")
        var item = prompt();  /** returns a string variable */
        var itemlist =  document.getElementById("items");
        console.log(typeof itemlist); /** returns an object*/
       // itemlist.createElement("li"); /** A node is the generic name for any type of object in the DOM hierarchy. */
      
       
      });
       
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="items"&gt;
       &lt;li&gt;The first item is free!&lt;/li&gt;
       &lt;/ul&gt;
      
      &lt;button type="button" id="add-item"&gt;Add item&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Currently i get the following error:</p>
  
  <p>Uncaught TypeError: itemlist.createElement is not a function
      at HTMLBodyElement. </p>
  
  <p>Note that i have also tried using querySelector to get the list of items, as well as the function appendChild() on the item-list, but none of it works...</p>
  
  <p>Any help or suggestions are much appreciated!</p>