Come aggiungere dati al div usando JavaScript?

Sto usando AJAX per aggiungere dati all'elemento div, dove riempio il div da JavaScript, come posso aggiungere nuovi dati al div senza perdere i dati precedenti trovati nel div?

Prova questo:

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

div.innerHTML += 'Extra stuff';

Utilizzando appendChild:

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

Uso di innerHTML:
questo approccio rimuoverà tutti gli ascoltatori dagli elementi esistenti, come indicato da @BiAiB. Quindi fai attenzione se hai intenzione di usare questa versione.

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

Attenzione innerHTML, perdi qualcosa quando lo usi:

theDiv.innerHTML += 'content',     

È equivalente a:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Che distruggerà tutti i nodi dentro di te dive ne creerà di nuovi. Tutti i riferimenti e gli ascoltatori degli elementi al suo interno andranno persi .

Se è necessario mantenerli (quando è stato collegato un gestore di clic, ad esempio), è necessario aggiungere i nuovi contenuti con le funzioni DOM (appendChild, insertAfter, insertBefore):

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

Se vuoi farlo velocemente e non vuoi perdere riferimenti e gli ascoltatori usano: .insertAdjacentHTML () ;

"Non analizza l'elemento su cui viene utilizzato e quindi non danneggia gli elementi esistenti all'interno dell'elemento. Questo, evitando il passaggio aggiuntivo di serializzazione, lo rende molto più veloce della manipolazione diretta di HTMLHTML."

Supportato su tutti i browser principali (IE6 +, FF8 +, Tutti gli altri e Mobile): http://caniuse.com/#feat=insertadjacenthtml

Esempio da 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>

Se stai usando jQuery puoi usarlo $('#mydiv').append('html content')e manterrà il contenuto esistente.

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

Anche questo funzionerà:

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

div.innerHTML += 'Text to append';

Soluzione IE9 + (Vista +), senza creare nuovi nodi di testo:

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

Tuttavia, questo non ha funzionato bene per me poiché avevo bisogno di una nuova riga dopo ogni messaggio, quindi il mio DIV si è trasformato in un UL in stile con questo codice:

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

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

Differenze rispetto a innerHTML

innerHTML restituisce l'HTML come indica il nome. Abbastanza spesso, al fine di recuperare o scrivere testo all'interno di un elemento, le persone usano innerHTML. In alternativa, si dovrebbe usare textContent. Poiché il testo non viene analizzato come HTML, è probabile che abbia prestazioni migliori. Inoltre, questo evita un vettore di attacco XSS.

puoi usare jQuery. che lo rendono molto semplice.

basta scaricare il file jQuery aggiungere jQuery nel proprio HTML
oppure è possibile il collegamento online dell'utente:

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

e prova questo:

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

Il seguente metodo è meno generale di altri, tuttavia è ottimo quando sei sicuro che l'ultimo nodo figlio del div sia già un nodo di testo. In questo modo non creerai un nuovo nodo di testo usando appendData AppendData di riferimento MDN

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");

Perché non usare solo setAttribute?

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

Quindi è possibile ottenere questi dati:

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");

Usa .html()senza alcun argomento per vedere che hai inserito. Puoi utilizzare la console del browser per testare rapidamente queste funzioni prima di utilizzarle nel tuo codice.