¿Cómo agregar datos a div usando JavaScript?

Estoy usando AJAX para agregar datos al elemento div, donde lleno el div desde JavaScript, ¿cómo puedo agregar nuevos datos al div sin perder los datos anteriores encontrados en div?

Prueba esto:

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

div.innerHTML += 'Extra stuff';

Usando appendChild:

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

Uso de innerHTML:
este enfoque eliminará a todos los oyentes de los elementos existentes mencionados por @BiAiB. Por lo tanto, tenga cuidado si planea usar esta versión.

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

Cuidado innerHTML, pierdes algo cuando lo usas:

theDiv.innerHTML += 'content',     

Es equivalente a:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Lo cual destruirá todos los nodos dentro de usted divy recreará otros nuevos. Se perderán todas las referencias y oyentes a los elementos que contiene .

Si necesita conservarlos (cuando ha adjuntado un controlador de clics, por ejemplo), debe agregar los nuevos contenidos con las funciones DOM (appendChild, insertAfter, insertBefore):

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

Si quiere hacerlo rápido y no quiere perder referencias y los oyentes usan: .insertAdarestHTML () ;

"No vuelve a analizar el elemento en el que se está utilizando y, por lo tanto , no corrompe los elementos existentes dentro del elemento. Esto y evitar el paso adicional de serialización lo hace mucho más rápido que la manipulación directa de innerHTML".

Compatible con todos los navegadores principales (IE6 +, FF8 +, Todos los demás y dispositivos móviles): http://caniuse.com/#feat=insertadaresthtml

Ejemplo de https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdarestHTML

// <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 está usando jQuery, puede usarlo $('#mydiv').append('html content')y mantendrá el contenido existente.

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

Incluso esto funcionará:

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

div.innerHTML += 'Text to append';

Solución IE9 + (Vista +), sin crear nuevos nodos de texto:

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

Sin embargo, esto no fue suficiente para mí, ya que necesitaba una nueva línea después de cada mensaje, por lo que mi DIV se convirtió en un UL con este código:

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

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

Diferencias de innerHTML

innerHTML devuelve el HTML como su nombre lo indica. Muy a menudo, para recuperar o escribir texto dentro de un elemento, las personas usan innerHTML. textContent debe usarse en su lugar. Debido a que el texto no se analiza como HTML, es probable que tenga un mejor rendimiento. Además, esto evita un vector de ataque XSS.

puedes usar jQuery. que lo hacen muy simple

simplemente descargue el archivo jQuery, agregue jQuery a su HTML
o puede usar el enlace en línea:

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

y prueba esto:

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

El siguiente método es menos general que otros, sin embargo, es excelente cuando está seguro de que su último nodo secundario del div ya es un nodo de texto. De esta manera, no creará un nuevo nodo de texto utilizando 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");

¿Por qué no solo usar setAttribute?

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

Entonces puede obtener estos datos de la siguiente manera:

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

Use .html()sin ningún argumento para ver que ha ingresado. Puede usar la consola del navegador para probar rápidamente estas funciones antes de usarlas en su código.