title: Load HTML first before Javascript
body: <p>I'm trying to develop something in real time which in this case, I'm using socketio for nodejs. Although everything else is working fine, my main issue now is that my program loads the javascript first before the HTML, which therefore means that the output at start is just empty.</p>
  
  <p>In my code, the javascript calls everything else in the database and is concatenated by tags where in it is later thrown in the html.</p>
  
  <p>Here is my code in html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;table id="output" border=1&gt;
            &lt;thead id="headers"&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
              &lt;th&gt;Number&lt;/th&gt;
            &lt;/thead&gt;
            &lt;tbody id="online"&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;table id="output" border=1&gt;
            &lt;thead id="headers"&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
              &lt;th&gt;Number&lt;/th&gt;
            &lt;/thead&gt;
            &lt;tbody id="offline"&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;script src="/chat.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  
  
  <p>And here is the javascript:</p>
  
  <pre class="lang-js prettyprint-override"><code>var online = document.getElementById('online'),
    offline = document.getElementById('offline');
  
  socket.on('user joined', function(data) {
    online.innerHTML = "";
    for (var ctr = 0; ctr &lt; data.length; ctr++) {
      online.innerHTML += '&lt;td&gt;' + data[ctr].name + '&lt;/td&gt;' +
        '&lt;td&gt;' + data[ctr].address + '&lt;/td&gt;' +
        '&lt;td&gt;' + data[ctr].number + '&lt;/td&gt;';
    }
  });
  
  socket.on('user left', function(data) {
    offline.innerHTML = "";
    for (var ctr = 0; ctr &lt; data.length; ctr++) {
      offline.innerHTML += '&lt;td&gt;' + data[ctr].name + '&lt;/td&gt;' +
        '&lt;td&gt;' + data[ctr].address + '&lt;/td&gt;' +
        '&lt;td&gt;' + data[ctr].number + '&lt;/td&gt;';
    }
  });
  </code></pre>
  
  
  
  <p>I've already searched this online however my case is different as I call the javascript file in the html, instead of having all the script with the html itself.</p>
  
  <p>I've also read that having the javascript file be called after the html works, but apparently, I've done that (as seen in my codes) and still nothing.</p>