DOM not updating after adding a class to a div?
<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>