title: How to add <li> element with <i> element to <ul> after click in java script
body: <p>I have small problem with adding  element (close button) to  after click in java script.</p>
  
  <p>Here is the 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>var add = document.getElementById("add-button");
  add.addEventListener("click", function() {
    var ul = document.getElementById("tasks");
    var input = document.getElementById("new-task").value;
  
    var li = document.createElement("li");
    ul.appendChild(li);
  
    var i = document.createElement("i");
    ul.appendChild(i);
  
    li.innerHTML = input + i;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;TODO supply a title&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans:400,700&amp;amp;subset=latin-ext" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;h1&gt;Dodaj nowe zadanie do listy&lt;/h1&gt;
      &lt;div class="to-do-container"&gt;
        &lt;div class="input-data"&gt;
          &lt;input id="new-task" type="text"&gt;
          &lt;button id="add-button" type="button"&gt;Dodaj&lt;/button&gt;
        &lt;/div&gt;
        &lt;ul id="tasks"&gt;
          &lt;li&gt;Zadzwonić do...&lt;i class="fas fa-times"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;Odebrać dzieci z...&lt;i class="fas fa-times"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;Kupić na obiad...&lt;i class="fas fa-times"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;Umówić się na...&lt;i class="fas fa-times"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;Załatwić na mieście...&lt;i class="fas fa-times"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;Spotkać się z...&lt;i class="fas fa-times"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It gives me "HTML Element Object". I am now learning Js using simple tasks, but here I think there is small detail. </p>
  
  <p>Thanks for help in advance. </p>