Вставьте содержимое в innerHTML без очистки того, что уже внутри

Question

Я пытаюсь создать кнопку публикации, которая вставляет последние сообщения в div, не очищая все, что находится внутри. Мой текущий код вставляет новый разделитель, но очищает все внутри него, поэтому я заканчиваю только последним сообщением.

Кто-нибудь знает, как это исправить?

Спасибо

Код:

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;
}

Answer 1

Проблема в вашем выражении switch. Ваши случаи для обработки 1 - 3 полностью сбрасывают innerHTML вашего элемента. Возможно, вы не сможете увидеть это, но эти случаи получают удар. Попробуйте переместить загрузочное изображение в другой контейнер, и оно начнет работать.

  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;
  }

Answer 2

1. скопировать внутренний html в переменную
2. смешайте новый контент и переменную так, как вам нужно (новый + старый или старый + новый)
3. установить внутренний HTML = ваш смешанный материал

Answer 3

Я верю, что это поможет:

whatever.innerHTML += additionalInfo;

Answer 4

var currentContent = document.getElementById('status').innerHTML;

document.getElementById('status').innerHTML = currentContent+"new stuff";