将内容插入到 innerHTML 中而不清除里面已有的内容

Posted 2023-05-07

【中文标题】将内容插入到 innerHTML 中而不清除里面已有的内容

【英文标题】：Insert contents into innerHTML without clearing what's already inside

【发布时间】：2010-12-10 05:58:56

【问题描述】：

我正在尝试创建一个将最新帖子插入 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 个？而真正清除 div 的正是这 3 个 other 案例？

除非您特别想避免这种情况，否则我建议您使用 jQuery 之类的框架来帮助处理这些 ajax 巫术。从长远来看，它会让您的生活变得更加轻松。

【参考方案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;
  

【参考方案2】：

将内部 html 复制到变量中 以您需要的方式混合新内容和变量（新 + 旧或旧 + 新） 设置内部 html = 你的混合内容

【参考方案3】：

我相信这会成功：

whatever.innerHTML += additionalInfo;

【讨论】：

我试过了。它仍然会清除里面的所有内容，然后添加新内容。

我刚刚在 IE6,7,8, FF3, Chrome3 中测试过，效果很好

【参考方案4】：

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

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

【讨论】：

请在您的答案中添加一些上下文。只是代码答案可能会被删除。