title: HTML Not displaying when DIV's are a different order to Javascript
body: <p>I have a AJAX timer That uses the <code>GET</code> command to retrieve a <code>JSON</code> encoded <code>MySQL</code> query via <code>PHP</code>...</p>
  
  <p>The timer is working correctly &amp; the information is also being retrieved...</p>
  
  <p>To be able to store the results so that i can display them in <code>DIV</code> I have made a <code>VAR</code> called <code>LIST</code> and <code>EVALUATED</code> the <code>xmlhttp.responseText</code></p>
  
  <p>Then I have created a list of <code>documentgetelementbyid</code> to hold the results so they can be used in the DIV's around the site</p>
  
  <p>Everything works perfectly if I display the data <strong>in order</strong> within HTML, but as soon as I attempt to display the data <strong>not to the order in my JavaScript file</strong> the display goes blank..</p>
  
  <p>Im guessing that it is because of the way i am attempting to store the results within JavaScript..</p>
  
  <p>How is it possible to store these results within JavaScript and then call them in HTML but not to the order they are within JavaScript..</p>
  
  <p>I hope what I have explained makes sense, any advice would be greatly appreciated...</p>
  
  <p>THE JAVASCRIPT CODE:</p>
  
  <pre><code>function getPlaylist()
  {
       var xmlhttp, timer;
  
       if (window.XMLHttpRequest)
       {
          xmlhttp = new XMLHttpRequest();
       } 
       else
       {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
  
       xmlhttp.onreadystatechange = function ()
       {
         if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) 
         {
  
            var list = eval ('('+xmlhttp.responseText+')');
  
            document.getElementById("list0.artist").innerHTML=list[0].artist;
            document.getElementById("list0.title").innerHTML=list[0].title;
            document.getElementById("list0.label").innerHTML=list[0].label;
            document.getElementById("list0.albumyear").innerHTML=list[0].albumyear;
            document.getElementById("list0.picture").innerHTML='&lt;img src="/testsite/covers/' + list[0].picture + '" width="200" height="auto"/&gt;';
  
            document.getElementById("list1.artist").innerHTML=list[1].artist;
            document.getElementById("list1.title").innerHTML=list[1].title;
            document.getElementById("list1.label").innerHTML=list[1].label;
            document.getElementById("list1.albumyear").innerHTML=list[1].albumyear;
            document.getElementById("list1.picture").innerHTML='&lt;img src="/testsite/covers/' + list[1].picture + '" width="150" height="auto"/&gt;';
  
            document.getElementById("list2.artist").innerHTML=list[2].artist;
            document.getElementById("list2.title").innerHTML=list[2].title;
            document.getElementById("list2.label").innerHTML=list[2].label;
            document.getElementById("list2.albumyear").innerHTML=list[2].albumyear;
            document.getElementById("list2.picture").innerHTML='&lt;img src="/testsite/covers/' + list[2].picture + '" width="50" height="auto"/&gt;';
  
            document.getElementById("list3.artist").innerHTML=list[3].artist;
            document.getElementById("list3.title").innerHTML=list[3].title;
            document.getElementById("list3.label").innerHTML=list[3].label;
            document.getElementById("list3.albumyear").innerHTML=list[3].albumyear;
            document.getElementById("list3.picture").innerHTML='&lt;img src="/testsite/covers/' + list[1].picture + '" width="50" height="auto"/&gt;';
  
            document.getElementById("list4.artist").innerHTML=list[4].artist;
            document.getElementById("list4.title").innerHTML=list[4].title;
            document.getElementById("list4.label").innerHTML=list[4].label;
            document.getElementById("list4.albumyear").innerHTML=list[4].albumyear;
            document.getElementById("list4.picture").innerHTML='&lt;img src="/testsite/covers/' + list[4].picture + '" width="50" height="auto"/&gt;';  
         }
      };
  
  
      xmlhttp.onerror = function() 
      {
        clearTimeout(timer);
      };
  
      xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
      xmlhttp.send();
  
  
      timer = setTimeout(getPlaylist, 1000);
  }
  </code></pre>
  
  <p>THE HTML CODE: </p>
  
  <p><strong>(This works in the order below but if i were to change the first DIV to look for "list1.artist" instead of "list0.artist" the page will not display.)</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="/testsite/OneSecondPlaylist.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="getPlaylist()"&gt;
  
  &lt;h1&gt;Now Playing&lt;/h1&gt;
  &lt;div id="list0.artist"&gt;&lt;/div&gt;
  &lt;div id="list0.title"&gt;&lt;/div&gt;
  &lt;div id="list0.label"&gt;&lt;/div&gt;
  &lt;div id="list0.albumyear"&gt;&lt;/div&gt;
  &lt;div id="list0.picture"&gt;&lt;/div&gt;
  
  &lt;h2&gt;Last Played&lt;/h2&gt;
  &lt;div id="list1.artist"&gt;&lt;/div&gt;
  &lt;div id="list1.title"&gt;&lt;/div&gt;
  &lt;div id="list1.label"&gt;&lt;/div&gt;
  &lt;div id="list1.albumyear"&gt;&lt;/div&gt;
  &lt;div id="list1.picture"&gt;&lt;/div&gt;
  
  &lt;h2&gt;History&lt;/h2&gt;
  &lt;div id="list2.artist"&gt;&lt;/div&gt;
  &lt;div id="list2.title"&gt;&lt;/div&gt;
  &lt;div id="list2.label"&gt;&lt;/div&gt;
  &lt;div id="list2.albumyear"&gt;&lt;/div&gt;
  &lt;div id="list2.picture"&gt;&lt;/div&gt;
  
  &lt;div id="list3.artist"&gt;&lt;/div&gt;
  &lt;div id="list3.title"&gt;&lt;/div&gt;
  &lt;div id="list3.label"&gt;&lt;/div&gt;
  &lt;div id="list3.albumyear"&gt;&lt;/div&gt;
  &lt;div id="list3.picture"&gt;&lt;/div&gt;
  
  &lt;div id="list4.artist"&gt;&lt;/div&gt;
  &lt;div id="list4.title"&gt;&lt;/div&gt;
  &lt;div id="list4.label"&gt;&lt;/div&gt;
  &lt;div id="list4.albumyear"&gt;&lt;/div&gt;
  &lt;div id="list4.picture"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>