title: DOM not updating after adding a class to a div?
body: <p>I'm trying to write a program that collects all class names in a <code>div</code>, stores them in an <code>array</code> and pushes them all back to the DOM with a class called <code>blue</code> at the end, this is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;some title&lt;/title&gt;
    &lt;style&gt;
      .blue{
          width: 200px;
          height: 200px;
          background: blue;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="someClass otherClass" id="box"&gt;&lt;/div&gt;
      &lt;button id="btn"&gt;click&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The thing is, I know how to get all the class names inside the <code>div</code> and even how to push <code>blue</code> (on <code>btn</code> click) inside of that div together with the other values I have collected but why isn't the blue box showing up? What am I missing?</p>
  
  <pre><code>var domManipulation = function(){
        var box = document.querySelector('#box');
        var btn = document.querySelector('#btn');
        var class_list = [];
  
        if(box.classList.length &gt; 0){
          for(var i = 0; i &lt; box.classList.length; i++){
            class_list.push(box.classList[i]);
          }
        }
  
        btn.addEventListener('click', function(){
            class_list.push("blue");
            box.classList.add(class_list);
            console.log(class_list);
        });
  
   }();
  </code></pre>
  
  <p>Here is a <a href="https://jsbin.com/ditosi/edit?html,js,console,output">JsBin</a> and I can't use <strong>jQuery</strong> btw.</p>