title: .append() vs .html() in forEach loop
body: <p>I'm, struggling a little bit trying to understand the way .append and .html works.
  I have this code which generates a new <code>&lt;li&gt;</code> element when clicking a button:</p>
  <p>The way that it's written below works fine. The thing is that if instead of .html() I use .append() it add a new <code>&lt;li&gt;</code> plus all the others, not just ONE <code>&lt;li&gt;</code></p>
  <p>Can someone explain to me why does it happen?
  Thanks in advance :)</p>
  <pre class="lang-js prettyprint-override"><code>const showTask = () =&gt;{
      let itemHtml = &quot;&quot;;
      toDoList.forEach((item, index)=&gt;{
          
          itemHtml += 
              `&lt;li class=&quot;item ${item.isCompleted == true ? &quot; item-is-done&quot; : &quot;&quot;}&quot; id=&quot;${index}&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;checkbox&quot;&gt;&lt;span&gt;${item.task}&lt;/span&gt;               
                  &lt;button type=&quot;button&quot; class=&quot;remove&quot; onClick=&quot;deleteTask(${index})&quot;&gt;&lt;i class=&quot;bi bi-trash&quot; id=&quot;remove-btn&quot;&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/li&gt;`;
      });
  
      $(&quot;.list&quot;).html(itemHtml);
  };
  </code></pre>