title: Set innerHTML of a div to = multiple array items using getElementById
body: <p>I'm trying to finish with the html <code>&lt;div id="animal"&gt; Dog Cat Horse &lt;/div&gt;</code> but i can't figure out how to combine multiple array elements into one innerHTML. I'm trying something like this:</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 myArray = [
    ['Dog', 'Terrier'],
    ['Cat', 'Tabby'],
    ['Horse', 'Shetland'],
  ];
  
  for (i = 0; i &lt; myArray.length; i++) {
    document.getElementById('animal').innerHTML = locations[i][0];
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="animal"&gt; animal names here &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>