title: Why will javascript only output the last string in array?
body: <p>I am learning javascript and have come across something I don't understand</p>
  
  <p>Why does javascript only output the last string of the array into the <code>&lt;ul&gt;</code> id but outputs the full array length in the console?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ul = document.getElementById('id');
  var colours = ["red", "green", "blue"];
  
  var i;
  for (i = 0; i &lt; colours.length; i++) {
    console.log(colours[i])
    ul.innerHTML = "&lt;li&gt;" + colours[i] + "&lt;/li&gt;";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="id"&gt;&lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>