Comment ajouter des données à une division en utilisant JavaScript ?

Question

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

Answer 1

Essayez ça :

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

div.innerHTML += 'Extra stuff';

Answer 2

Utilisation de 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 auditeurs des éléments existants, comme mentionné par @BiAiB. Soyez donc prudent si vous envisagez d'utiliser cette version.

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

Answer 3

Méfiez-vous innerHTML vous avez en quelque sorte perdre quelque chose quand vous l'utilisez :

theDiv.innerHTML += 'content';

Est équivalent à :

theDiv.innerHTML = theDiv.innerHTML + 'content';

Ce qui détruira tous les noeuds de votre div et en recréer 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 clics, 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);

Answer 4

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

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

Answer 5

Même ça, ça va marcher :

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

div.innerHTML += 'Text to append';