Trouble using JavaScript for loop to populate an array with HTML divs
<p>I'm trying to populate the contents of an array with the HTML from 5 different div elements using a loop.  I can't get the for loop to work correctly.  Any ideas?</p>

<p>The HTML:</p>

<p></p>

<pre><code>&lt;div id="person0"&gt;John&lt;/div&gt;
&lt;div id="person1"&gt;Kathleen&lt;/div&gt;
&lt;div id="person2"&gt;Cynthia&lt;/div&gt;
&lt;div id="person3"&gt;Eric&lt;/div&gt;
&lt;div id="person4"&gt;Jay&lt;/div&gt;



&lt;div style="width: 600px; margin: auto; padding: 15px; border: 1px solid gray; font-family: sans-serif;"&gt;
        &lt;h1&gt;The People&lt;/h1&gt;
        &lt;div id="result"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>The Javascript:</p>

<pre><code>function pageLoaded(){

  var list = "&lt;ul&gt;";
  var myArray = new Array();

  for(i=0; i&lt;6; i++){
    var person = "person";
    var personNumber = "" + i.toString();
    var divId = person.concat(personNumber);
    myArray[i] = document.getElementById(divId).innerHTML;
    list +="&lt;li&gt;"+myArray[i]+"&lt;/li&gt;";
  }


  list +="&lt;/ul&gt;";

  document.getElementById("result").innerHTML=list;

}
</code></pre>
