title: Adding a class with DOM JavaScript
body: <p>Firstly, my question might be foolish. sorry about that. I'm newbie.</p>
  <p>I try to understand DOM. That's why I'm trying to make a shopping list.</p>
  <p>At my shopping list, when I add an item to my list I try to add a class as well. Also every item has their own delete button. But problem is I couldn't do add a class to new item. My code is like that
  html</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
          &lt;h1&gt;Shopping List&lt;/h1&gt;
          &lt;p&gt;Please write your ingredients&lt;/p&gt;
          &lt;input id=&quot;userinput&quot; type=&quot;text&quot; placeholder=&quot;Enter items&quot;&gt;
          &lt;button id=&quot;enter&quot;&gt;Enter&lt;/button&gt;
      &lt;br&gt;
          
          &lt;ul&gt;
              
          &lt;/ul&gt;
          
      &lt;/div&gt;
  </code></pre>
  <p>and my javascript</p>
  <pre><code>var input = document.getElementById(&quot;userinput&quot;)
  var ul = document.querySelector(&quot;ul&quot;);
  
  function createListElement(){
      var list = document.createElement(&quot;li&quot;);
      list.appendChild(document.createTextNode(input.value));
      ul.appendChild(list)
      input.value =&quot;&quot;;
  
      document.getElementsByTagName(&quot;ul&quot;).setAttribute(&quot;class&quot;, &quot;done&quot;);
  
  
      var del = document.createElement(&quot;button&quot;);
      del.appendChild(document.createTextNode(&quot;Delete&quot;));
      list.appendChild(del)
  }
  </code></pre>