Como anexar dados ao div usando JavaScript?

Estou usando o AJAX para anexar dados ao elemento div, onde preencho a div do JavaScript, como posso acrescentar novos dados à div sem perder os dados anteriores encontrados na div?

Tente o seguinte:

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

Usando innerHTML:
Essa abordagem removerá todos os ouvintes dos elementos existentes, conforme mencionado por @BiAiB. Portanto, tenha cuidado se você planeja usar esta versão.

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

Cuidado innerHTML, você meio que perde algo ao usá-lo:

theDiv.innerHTML += 'content',     

É equivalente a:

theDiv.innerHTML = theDiv.innerHTML + 'content'

O que destruirá todos os nós dentro do seu dive recriará novos. Todas as referências e ouvintes aos elementos dentro dele serão perdidas .

Se você precisar mantê-los (quando tiver anexado um manipulador de cliques, por exemplo), será necessário anexar o novo conteúdo às funções DOM (appendChild, insertAfter, insertBefore):

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

Se você deseja fazê-lo rapidamente e não deseja perder referências e ouvintes, use: .insertAdjacentHTML () ;

"Ele não reanalisa o elemento em que está sendo usado e, portanto , não corrompe os elementos existentes dentro do elemento. Isso evita o passo extra da serialização, tornando-o muito mais rápido do que a manipulação direta interna do HTML."

Suportado em todos os navegadores principais (IE6 +, FF8 +, Todos os outros e dispositivos móveis): http://caniuse.com/#feat=insertadjacenthenthtml

Exemplo 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>

Se você estiver usando o jQuery, poderá usá $('#mydiv').append('html content')-lo e ele manterá o conteúdo existente.

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

Mesmo isso irá funcionar:

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

div.innerHTML += 'Text to append';

Solução IE9 + (Vista +), sem criar novos nós de texto:

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

No entanto, isso não funcionou muito bem para mim, pois eu precisava de uma nova linha após cada mensagem, então meu DIV se transformou em um UL estilizado com este código:

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

De https://developer.mozilla.org/pt-BR/docs/Web/API/Node/textContent :

Diferenças do innerHTML

innerHTML retorna o HTML como o nome indica. Muitas vezes, para recuperar ou escrever texto dentro de um elemento, as pessoas usam innerHTML. textContent deve ser usado. Como o texto não é analisado como HTML, é provável que tenha um melhor desempenho. Além disso, isso evita um vetor de ataque XSS.

Você pode usar o jQuery. o que torna muito simples.

basta baixar o arquivo jQuery e adicionar o jQuery ao seu HTML
ou você pode acessar o link on-line:

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

e tente o seguinte:

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

O método a seguir é menos geral que outros, no entanto, é ótimo quando você tem certeza de que seu último nó filho da div já é um nó de texto. Dessa forma, você não criará um novo nó de texto usando a appendData Referência MDN 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 que não usar setAttribute?

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

Em seguida, você pode obter esses dados:

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()sem argumentos para ver que você inseriu. Você pode usar o console do navegador para testar rapidamente essas funções antes de usá-las no seu código.