¿Cómo agregar texto a un elemento div?
Estoy usando AJAX para agregar datos a un <div>elemento, donde completo <div>desde JavaScript. ¿Cómo puedo agregar nuevos datos <div>sin perder los datos anteriores que contiene?
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 internalHTML:
este enfoque eliminará todos los oyentes de los elementos existentes como lo menciona @BiAiB. Así que tenga cuidado si planea utilizar esta versión.
var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>";
Tenga cuidado innerHTML, en cierto modo pierde algo cuando lo usa:
theDiv.innerHTML += 'content';
Es equivalente a:
theDiv.innerHTML = theDiv.innerHTML + 'content';
Lo que destruirá todos los nodos dentro de ti divy recreará otros nuevos. Se perderán todas las referencias y oyentes a los elementos que contiene .
Si necesita conservarlos (cuando haya adjuntado un controlador de clic, por ejemplo), debe agregar el nuevo contenido con las funciones DOM (appendChild,insertAfter,insertBefore):
var newNode = document.createElement('div');
newNode.innerHTML = data;
theDiv.appendChild(newNode);
