title: Display array into span with jQuery
body: <p>Trying to learn more about jQuery I have run into an issue with trying to display an inline CSS into a <code>&lt;span&gt;</code>.  I am trying to take an array and display it as followed:</p>
  
  <pre><code>&lt;div class="colorbar"&gt;
      &lt;span style="background: #A56AC2"&gt;&lt;/span&gt;
      &lt;span style="background: #E2CED7"&gt;&lt;/span&gt;
      &lt;span style="background: #5E5992"&gt;&lt;/span&gt;
      &lt;span style="background: #E4E6A2"&gt;&lt;/span&gt;
      &lt;span style="background: #B45748"&gt;&lt;/span&gt;
  &lt;/div&gt;&lt;!-- end .colorbar --&gt;
  </code></pre>
  
  <p>My array:</p>
  
  <pre><code>var colorArray = new Array(
      "A56AC2",
      "E2CED7",
      "5E5992",
      "B45748",
      "E4E6A2"
  );
  </code></pre>
  
  <p>Ive tried:</p>
  
  <pre><code> $('.colorbar').html( '&lt;span style="background: #' + colorArray. + (';&lt;/span&gt;'));
  </code></pre>
  
  <p>From this <a href="https://stackoverflow.com/questions/9541570/display-all-items-in-array-using-jquery">article</a> I assumed:</p>
  
  <pre><code>$('.colorbar').html( '&lt;span style="background: #' + colorArray.join + (';&lt;/span&gt;'));
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>var addingHTML = [];
  for ( var i=0; i &lt; colorArray.length; i++ ) {
      addingHTML.push ('&lt;span style="background: #' + colorArray + ';"');
  }
  $(".colorbar").html(addingHTML.join(""));
  </code></pre>
  
  <p>Ive looked into:</p>
  
  <ul>
  <li>adding <a href="http://api.jquery.com/css/" rel="nofollow noreferrer"><code>.css()</code></a> to the <code>&lt;span&gt;</code> but going through the <code>array</code> Im having trouble.</li>
  <li>using <a href="https://api.jquery.com/each/" rel="nofollow noreferrer"><code>.each()</code></a> </li>
  </ul>
  
  <p>However, it is not rendering correctly.  Does someone mind educating me on what I am doing wrong?</p>