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

我正在尝试创建一个帖子按钮,将最新的帖子插入到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;
}

解决方法:

问题出在你的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;
  }

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...