Question

In my application i want to append or pre pend if that’s the right word, the result of a ajax request to an already displayed list of posts by people. i mean when the user clicks on post and the ajax request is fired, the result should be pushed in to the top of the existing list of posts in the div.
One way i thought of was to fire a second ajax request after the user posts something to fetch the new list of posts sorted by timestamp, this way the post will automatically appear at the top but this seems to be punishing the database with unnecessary calls.

Please suggest the best and effective way. Please do not suggest jquery for this, i want to do it in raw javascript, i will use jquery later when i do not have any way to achieving i want to achieve.

my javascript code:

 function postAjaxFade(){

 t = document.getElementById("post").value;
 // other element values like timestamp etc...
 params = "post="+t+"&fl="+f;

 if (window.XMLHttpRequest)
  { 
  xmlhttp=new XMLHttpRequest();
 }
 else
 {
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
  xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
 // what do i add here to append the value to top of this div below..
   document.getElementById("postContainer").innerHTML=xmlhttp.responseText;

  }
 }
 xmlhttp.open("POST","search.php",true);
 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xmlhttp.send(params);
}

Answer 1

change:

document.getElementById("postContainer").innerHTML=xmlhttp.responseText;

to

var inner = document.getElementById("postContainer").innerHTML;
inner = xmlhttp.responseText + inner;
document.getElementById("postContainer").innerHTML = inner;