Comment ajouter des données à div en utilisant JavaScript?

J'utilise AJAX pour ajouter des données à l'élément div, où je remplis le div à partir de JavaScript, comment puis-je ajouter de nouvelles données au div sans perdre les données précédentes trouvées dans div?

Essaye ça:

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

Utiliser appendChild:

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);

Utilisation de innerHTML:
Cette approche supprimera tous les écouteurs des éléments existants comme mentionné par @BiAiB. Soyez donc prudent si vous prévoyez d'utiliser cette version.

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>"; 

Attention innerHTML, vous perdez en quelque sorte quelque chose lorsque vous l'utilisez:

theDiv.innerHTML += 'content',     

Est équivalent à:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Ce qui détruira tous les nœuds à l'intérieur du vôtre divet en recréera de nouveaux. Toutes les références et tous les écouteurs des éléments qu'il contient seront perdus .

Si vous devez les conserver (lorsque vous avez attaché un gestionnaire de clic, par exemple), vous devez ajouter le nouveau contenu avec les fonctions DOM (appendChild, insertAfter, insertBefore):

var newNode = document.createElement('div');      
newNode.innerHTML = data;
theDiv.appendChild( newNode )

Si tu veux le faire rapidement et ne voulez pas perdre de références et d'écouteurs, utilisez: .insertAdjacentHTML () ;

"Il n'analyse pas l'élément il est utilisé et ne corrompt donc pas les éléments existants à l'intérieur de l'élément. Cela, et en évitant l'étape supplémentaire de sérialisation, le rend beaucoup plus rapide que la manipulation directe en HTML interne."

Pris en charge sur tous les navigateurs principaux (IE6 +, FF8 +, tous les autres et mobiles): http://caniuse.com/#feat=insertadjacenthtml

Exemple de https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

Si vous utilisez jQuery, vous pouvez utiliser $('#mydiv').append('html content') et il conservera le contenu existant.

http://api.jquery.com/append/

Même cela fonctionnera:

var div = document.getElementById('divID');

div.innerHTML += 'Text to append';

Solution IE9 + (Vista +), sans créer de nouveaux nœuds de texte:

var div = document.getElementById("divID");
div.textContent += data + " ";

Cependant, cela n'a pas tout à fait fait l'affaire pour moi car j'avais besoin d'une nouvelle ligne après chaque message, alors ma DIV s'est transformée en une UL stylisée avec ce code:

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

Depuis https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent :

Différences avec innerHTML

innerHTML renvoie le HTML comme son nom l'indique. Très souvent, pour récupérer ou écrire du texte dans un élément, les gens utilisent innerHTML. textContent doit être utilisé à la place. Étant donné que le texte n'est pas analysé en HTML, il est susceptible d'avoir de meilleures performances. De plus, cela évite un vecteur d'attaque XSS.

vous pouvez utiliser jQuery. ce qui le rend très simple.

il suffit de télécharger le fichier jQuery, d'ajouter jQuery dans votre code HTML
ou vous pouvez utiliser un lien en ligne:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

et essayez ceci:

 $("#divID").append(data);

La méthode suivante est moins générale que les autres, mais elle est idéale lorsque vous êtes sûr que votre dernier nœud enfant de la div est déjà un nœud de texte. De cette façon, vous ne créerez pas de nouveau nœud de texte à l'aide de appendData MDN Reference AppendData

let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;

if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
   lastChild.appendData("YOUR TEXT CONTENT");

Pourquoi ne pas simplement utiliser setAttribute?

thisDiv.setAttribute('attrName','data you wish to append');

Ensuite, vous pouvez obtenir ces données en:

thisDiv.attrName;

script java

document.getElementById("divID").html("this text will be added to div");

jquery

$("#divID").html("this text will be added to div");

Utilisez .html()sans aucun argument pour voir que vous avez entré. Vous pouvez utiliser la console du navigateur pour tester rapidement ces fonctions avant de les utiliser dans votre code.