Insert contents into innerHTML without clearing what's already inside

ajax, innerhtml, javascript

Solution

The problem is in your switch statement. Your cases to handle 1 - 3 completely reset the innerHTML of your element. You may not be able to see it, but these cases are getting hit. Try moving your loading image into a different container and it will start to work.

  switch(xmlHttp.readyState) {
    case 1:
      document.getElementById('status').innerHTML = "<img src=\"style/images/loader.gif\" />";
      document.getElementById('status').style.display = "block";
      break;
    case 2:
      document.getElementById('status').innerHTML = "<img src=\"style/images/loader.gif\" />";
      document.getElementById('status').style.display = "block";
      break;
    case 3:
      document.getElementById('status').innerHTML = "<img src=\"style/images/loader.gif\" />";
      document.getElementById('status').style.display = "block";
      break;
    case 4:
      var newdiv = document.createElement('div');
      newdiv.innerHTML = xmlHttp.responseText;
      document.getElementById('successs').appendChild(newdiv);
      break;
  }

Problem

I'm trying to create a post button that inserts the latest posts into a div, without clearing everything that is inside. My current code inserts the new divider, but clears everything inside it, so i end up with just the last post. Does anyone know how to fix it? Thanks The code is: ``` var xmlHttp function submitNews() { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support XMLHTTP!"); return; } var content = document.getElementById('newsfeed_box').value; var uid = document.getElementById('pu_uid').innerHTML; var url="ajax/submit_post.php"; url=url+"?post="+content+"&id="+uid; url=url+"&validate="+Math.random(); xmlHttp.onreadystatechange=stateChange; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChange() { switch(xmlHttp.readyState) { case 1: document.getElementById('successs').innerHTML = "<img src=\"style/images/loader.gif\" />"; document.getElementById('successs').style.display = "block"; break; case 2: document.getElementById('successs').innerHTML = "<img src=\"style/images/loader.gif\" />"; document.getElementById('successs').style.display = "block"; break; case 3: document.getElementById('successs').innerHTML = "<img src=\"style/images/loader.gif\" />"; document.getElementById('successs').style.display = "block"; break; case 4: var newdiv = document.createElement('div'); newdiv.innerHTML = xmlHttp.responseText; document.getElementById('successs').appendChild(newdiv); break; } } // creating the XMLHttpRequest function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } ```

Original source