¿Cómo agregar texto a un elemento div?

Question 1

Estoy usando AJAX para agregar datos a un <div> elemento, donde lleno el <div> de JavaScript. ¿Cómo puedo agregar nuevos datos a la <div> sin perder los datos anteriores encontrados en él?

Question 2

Prueba esto:

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

div.innerHTML += 'Extra stuff';

Question 3

Usando appendChild:

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

Usando HTML interno:
Este enfoque eliminará a todos los oyentes de los elementos existentes como lo menciona @BiAiB. Así que tenga cuidado si planea usar esta versión.

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

Question 4

Cuidado con innerHTMLtu tipo de perder algo cuando lo usas:

theDiv.innerHTML += 'content';

Es equivalente a:

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

Que destruirá todos los nodos dentro de su div y recrear otros nuevos. Se perderán todas las referencias y oyentes de los elementos que contiene..

Si necesita mantenerlos (cuando ha adjuntado un controlador de clic, 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);

Question 5

si quieres hacerlo rápido y no quiero perder las referencias y los oyentes usan: .insertAdjacentHTML();

“Eso no vuelve a analizar el elemento se está utilizando y por lo tanto no corrompe los elementos existentes dentro del elemento. Esto, y evitar el paso adicional de la serialización, hace que sea mucho mas rápido que la manipulación directa de HTML interno”.

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

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

Question 6

Si está usando jQuery, puede usar $('#mydiv').append('html content') y mantendrá el contenido existente.

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

Question 7

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

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

Sin embargo, esto no funcionó 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 estilo con este código:

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

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

Diferencias con HTML interno

innerHTML devuelve el HTML como su nombre lo indica. Muy a menudo, para recuperar o escribir texto dentro de un elemento, la gente usa innerHTML. en su lugar, se debe usar textContent. 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.

Question 8

Incluso esto funcionará:

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

div.innerHTML += 'Text to append';

¿Ha sido útil esta solución?