Insérer du contenu dans innerHTML sans effacer ce qui est déjà dedans

Question

J'essaye de créer un bouton post qui insère les derniers messages dans un div, sans effacer tout ce qui est à l'intérieur. Mon code actuel insère le nouveau séparateur, mais efface tout à l'intérieur, donc je me retrouve avec juste le dernier post.

Est-ce que quelqu'un sait comment le réparer?

Merci

Le code est:

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

Le problème est dans votre instruction switch. Vos cas à gérer 1 - 3 réinitialisent complètement le innerHTML de votre élément. Vous ne pouvez pas être en mesure de le voir, mais ces cas sont touchés. Essayez de déplacer votre image de chargement dans un conteneur différent et cela va commencer à fonctionner.

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. copier le code html interne dans une variable
2. mélanger le nouveau contenu et la variable la façon dont vous avez besoin (nouveau + vieux ou vieux + nouveau)
3. définir le html interne = vos trucs mélangés

Answer 3

Je crois que cela va faire l'affaire:

whatever.innerHTML += additionalInfo; 

Answer 4

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

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