javascript - Cum să adaug text într-un element div?

Folosesc AJAX pentru a adăuga date într-un element <div>, unde completez <div> din JavaScript. Cum pot să adaug date noi în <div> fără să pierd datele anterioare care se află în el?

Răspuns #1

Încearcă asta:

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

div.innerHTML += 'Extra stuff';

Răspuns #2

Folosind appendChild:

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

Folosind innerHTML:
Această abordare va elimina toți ascultătorii de evenimente de la elementele existente, așa cum a menționat @BiAiB. Deci folosiți cu prudență dacă intenționați să folosiți această versiune.

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

Răspunsul #3

Ai grijă la innerHTML, pierzi cam ceva atunci când îl folosești:

theDiv.innerHTML += 'content';

Este echivalent cu:

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

Care va distruge toate nodurile din interiorul div-ului tău și va recrea altele noi. Toate referințele și ascultătorii către elementele din interior vor fi pierdute.

Dacă trebuie să le păstrezi (când ai atașat un handler de click, de exemplu), trebuie să adaugi noile conținuturi folosind funcțiile DOM (appendChild, insertAfter, insertBefore):

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

Răspunsul #4

Dacă vrei să o faci repede și nu vrei să pierzi referințele și ascultătorii folosește: .insertAdjacentHTML();

"Nu reanalizează elementul pe care este folosit și astfel nu corupe elementele existente din interiorul elementului. Aceasta, împreună cu evitarea pasului suplimentar de serializare, îl fac mult mai rapid decât manipularea directă a innerHTML."

Compatibil cu toate browserele principale (IE6+, FF8+, toate celelalte și mobile): http://caniuse.com/#feat=insertadjacenthtml

Exemplu de la 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>

Răspunsul #5

Dacă folosești jQuery, poți folosi $ ('#mydiv').append('conținut html') și va păstra conținutul existent.

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

Răspunsul #6

Soluție IE9+ (Vista+), fără a crea noduri de text noi:

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

Totuși, acest lucru nu a funcționat tocmai pentru mine, deoarece aveam nevoie de o linie nouă după fiecare mesaj, așa că DIV-ul meu s-a transformat într-un UL stilizat cu acest cod:

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

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

Diferențe față de innerHTML

innerHTML returnează HTML-ul, așa cum indică și numele său. Destul de des, pentru a prelua sau scrie text într-un element, oamenii folosesc innerHTML. Ar trebui folosit textContent în schimb. Deoarece textul nu este analizat ca HTML, este probabil să aibă performanțe mai bune. În plus, acest lucru evită un vector de atac XSS.