¿Cómo agregar texto a un elemento div?

5 minutos de lectura

Avatar de usuario de Adham
adham

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?

  • $(div).append(datos);

    – Jimmy

    15 de abril de 2011 a las 13:55

  • @jimy eso es jquery, no hay necesidad de usarlo para algo tan trivial

    – Naftalí

    15 de abril de 2011 a las 13:55

  • @Neal seguro, pero también está usando AJAX, ¡así que jQuery es definitivamente una buena idea!

    – Alnitak

    15 de abril de 2011 a las 14:09

  • @Alnitak, pero ¿cómo sabes que el OP está usando jQuery para algo?

    – Naftalí

    15 de abril de 2011 a las 14:10

  • @Alnitak, jQuery no es el solo solución ajax

    – Naftalí

    15 de abril de 2011 a las 14:24

Avatar de usuario de Naftali
Naftali

Prueba esto:

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

div.innerHTML += 'Extra stuff';

  • ¡Peligro, Will Robinson! Esto agrega HTML, no texto. Si su Extra Stuff es proporcionado por el usuario, acaba de introducir una vulnerabilidad de seguridad. Es mejor usar la respuesta de @ Chandu a continuación.

    – David dado

    13 de febrero de 2016 a las 22:50

  • si, es un Vulnerabilidad XSS. Es mucho mejor crear un nodo de texto con el contenido, como se describe en la respuesta a continuación.

    – David dado

    12/04/2016 a las 19:50


  • Esto tampoco funcionaría en caso div contiene elementos con detectores de eventos o entradas con texto ingresado por el usuario. Recomiendo la respuesta de Chandu.

    – Sebastián Simón

    19 de abril de 2016 a las 16:09


  • Esto no se recomienda, consulte ¿Es posible agregar a innerHTML sin destruir los detectores de eventos de los descendientes?

    – Bergi

    4 oct 2016 a las 19:21

  • Sí, definitivamente no recomiendo esto ya que destruirá el estado de cualquier casilla de verificación, detectores de eventos.

    – Kurkula

    20 de noviembre de 2017 a las 19:15

Avatar de usuario de Chandu
chandu

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

  • Utilizo este método con mi elemento “contenteditable” con enlace angularjs, ¡y todo funciona correctamente!

    – malinterpretar

    18/10/2016 a las 16:04

  • Debería ser la respuesta aceptada de hecho. No solo de una manera hermosa, sino que innerHTML reconstruirá el DOM, y esa no es una buena solución. Usa appendChild().

    – Jan Sverre

    7 de enero de 2017 a las 14:53

  • Esto es mejor, pero createTextNode no funcionará si está cargando HTML. Si quisiera agregar elementos de lista, por ejemplo, esto no funcionaría. Eso es bastante limitante.

    – jake

    13 de marzo de 2017 a las 5:58

  • ¿Qué pasa si queremos cambiar el texto del mismo nodo de texto adjunto en el próximo evento?

    – Raúl Mishra

    1 de marzo de 2018 a las 8:06

  • @Jake Si es necesario insertar HTML en lugar de texto sin formato, entonces no use createTextNode. Hay varios otros métodos para la manipulación de DOM relacionados con esto, por ejemplo insertAdjacentHTML, insertAdjacentElement, etc. No puede llamarlo “limitación” si está utilizando las herramientas incorrectas. Sin embargo, la pregunta podría ser más clara en cuanto a qué se entiende por “datos”.

    – Sebastián Simón

    5 de enero de 2022 a las 22:02


Avatar de usuario de BiAiB
BiAiB

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

  • sí, pero esto hará que haya un extra div dentro del div principal que no es necesario y podría estropear algunos estilos css

    – Naftalí

    15 de abril de 2011 a las 14:11

  • @Neal, esta es solo una forma de ejemplo de usar appendChild. el punto no está aquí.

    – BiAiB

    15 de abril de 2011 a las 14:16

  • La forma correcta de hacer el appendChild fue hecho por @Cybernate

    – Naftalí

    15 de abril de 2011 a las 14:17

  • @Neal no, no lo es. No es ni correcto ni incorrecto. Solo depende de lo que el OP necesite agregar: texto, código html u otra cosa.

    – BiAiB

    15 de abril de 2011 a las 14:23

  • @Neal, esta es una forma perfectamente buena de agregar los datos, y es más versátil que document.createTextNode().

    – Alnitak

    15 de abril de 2011 a las 14:27

Avatar de usuario de Milan Rakos
milan rakos

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>

Avatar de usuario de Thomas Brasington
Tomas Brasington

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

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

Avatar de usuario de la comunidad
Comunidad

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.

avatar de usuario de slavoo
eslavo

Incluso esto funcionará:

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

div.innerHTML += 'Text to append';

¿Ha sido útil esta solución?