title: Todo List JS / appendChild only works on click, I don't want that
body: <p>I am practising JS on a To Do list, and I want to append a close icon to my LI tags with JS.
  But it only appends the icon when I click the LI tags.. I want the icon to be there already.
  The appendChild syntax isn't in a click function..</p>
  <p>Any idea what I am doing wrong?</p>
  <pre><code>// Select all LI and add class on click
     document.querySelectorAll(&quot;.thing&quot;).forEach(item =&gt; {
     item.addEventListener(&quot;click&quot;, () =&gt; {
     item.classList.toggle(&quot;checked&quot;);
     });
   });
  
  // Create close icon and append it to LI elements
  const myList = document.querySelectorAll(&quot;.thing&quot;);
  let i;
  for (i = 0; i &lt; myList.length; i++) {
    const span = document.createElement(&quot;SPAN&quot;);
    const txt = document.createTextNode(&quot;\u00D7&quot;);
    span.className = &quot;close&quot;;
    span.appendChild(txt);
    myList[i].appendChild(span);
  };
  </code></pre>
  <p>Here's the <a href="https://codepen.io/Papasaurus/pen/RwRrdLr" rel="nofollow noreferrer">pen</a></p>