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

将内部html复制到变量
按照您需要的方式混合新内容和变量（new + old OR old + new）
设置内部html =你的混合内容

Answer 3

我相信这会解决问题：

whatever.innerHTML += additionalInfo;

Answer 4

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

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

将内容插入innerHTML而不清除已经存在的内容

4 个答案: