title: how to add new <li> to <ul> onclick with javascript
body: <p>How do I add a list element to an existing ul using a function from an onclick? I need it to add to this type of list ...</p>
  
  <pre><code>&lt;ul id="list"&gt;
  &lt;li id="element1"&gt;One&lt;/li&gt;
  &lt;li id="element2"&gt;Two&lt;/li&gt;
  &lt;li id="element3"&gt;Three&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>... another list item with the id "element4" and text "Four" under that. I tried this function but it doesn't work...</p>
  
  <pre><code>function function1() {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode("Element 4"));
  }
  </code></pre>
  
  <p>I don't know JQuery so Javascript only please. Thank you!!</p>