javascript - Insert contents into innerHTML without clearing what's already inside - Stack Overflow

admin管理员组

文章数量:1287584

I'm trying to create a post button that inserts the latest posts into a div, without clearing everything that is inside. My current code inserts the new divider, but clears everything inside it, so i end up with just the last post.

Does anyone know how to fix it?

Thanks

The code is:

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

I'm trying to create a post button that inserts the latest posts into a div, without clearing everything that is inside. My current code inserts the new divider, but clears everything inside it, so i end up with just the last post.

Does anyone know how to fix it?

Thanks

The code is:

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

• javascript
• ajax
• innerhtml

Share Improve this question Follow edited Oct 26, 2009 at 19:21 Dinah 54.1k3131 gold badges134134 silver badges149149 bronze badges asked Oct 26, 2009 at 19:07 StephenStephen 16922 gold badges55 silver badges1212 bronze badges 2

• 1 You realize the code you have that "inserts the new divider" is only 1 of 4 switch cases? And it's these 3 other cases that actually clears the div? – Crescent Fresh Commented Oct 26, 2009 at 19:25
• Unless you're specifically trying to avoid it, I would remend using a framework like jQuery to help out with some of this ajax voodoo. In the long run, it will make your life significantly easier. – jckeyes Commented Oct 26, 2009 at 19:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

The problem is in your switch statement. Your cases to handle 1 - 3 pletely reset the innerHTML of your element. You may not be able to see it, but these cases are getting hit. Try moving your loading image into a different container and it will start to work.

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

1. copy the inner html into a variable
2. mix the new content and the variable the way you need (new + old OR old + new)
3. set the inner html = your mixed stuff

I believe this will do the trick:

whatever.innerHTML += additionalInfo;

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

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

本文标签： javascriptInsert contents into innerHTML without clearing what39s already insideStack Overflow