Question

Every second this script will open a page using AJAX and return the contents into a new div on this page, which it creates on the fly. But unfortunatly, they div’s go under each other. And I would like to create each new div at the top. I don’t really want to use jquery or anything similar.

Any assistance with this is greatly appreciated, I’m not very confident with JS so if it’s not obvious why, could you please give me a small explanation too. 🙂 Thanks

function timedCount()
{
  min = Math.floor(s/60);
  sec = s-(min*60);
  if(sec < 10) { sec = '0'+sec; }
  if(min >= 60) { min = min-15; }
  if(quit == 0) { document.getElementById('mTime').innerHTML = min+':'+sec; }
  s=s+1;
  var ajaxRequest;
  try { ajaxRequest = new XMLHttpRequest(); }  catch (e){
    try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
      try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){
        alert("Your browser broke!");
  return false;
      }
    }
  }
  ajaxRequest.onreadystatechange = function()
  {
    if(ajaxRequest.readyState == 4 && ajaxRequest.responseText != '')
   {
        if(ajaxRequest.responseText == 'HT') {
        document.getElementById('mTime').innerHTML = 'Half Time';
        t=setTimeout("timedCount()",(3600-s)*1000);
        quit=1;
       return;
    }
    if(ajaxRequest.responseText == 'FT') {
      document.getElementById('mTime').innerHTML = 'Full Time';
      quit=1;
      return;
    }
    el = document.createElement('rep'+i);
    el.innerHTML = ajaxRequest.responseText +'<br>';
    document.getElementById('container').appendChild(el);
    i=i+1;
  }
}
ajaxRequest.open("GET", "getMatch.php", true);
ajaxRequest.send(null);
}

Answer 1

You want the insertBefore function

var parent = document.getElementById('container');
parent.insertBefore(el, parent.firstChild);

Note that if parent is empty, and parent.firstChild is therefore null, then el will be inserted at the end of parent, which is what you’d want.