将内容插入到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";