Agregue HTML al elemento contenedor sin innerHTML

5 minutos de lectura

Avatar de usuario de Bob
Beto

Necesito una forma de agregar HTML a un elemento contenedor sin usar innerHTML. La razón por la que no quiero usar innerHTML es porque cuando se usa así:

element.innerHTML += htmldata

Funciona reemplazando primero todo el html antes de agregar el html antiguo más el html nuevo. Esto no es bueno porque restablece los medios dinámicos, como los videos flash incrustados…

Podría hacerlo de esta manera que funciona:

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

Sin embargo, el problema con esa forma es que ahora hay una etiqueta de intervalo adicional en el documento que no quiero.

¿Cómo se puede hacer esto entonces? ¡Gracias!

  • ¿Por qué no usar Jquery? Verifique mi respuesta detallada a continuación. stackoverflow.com/a/50482776/5320562

    – Loukan El Kadi

    6 de agosto de 2018 a las 6:25


avatar de usuario de alnafie
alnafie

Verificar la insertAdjacentHTML() método. El primer parámetro es donde desea agregar la cadena y toma (“beforebegin”, “afterbegin”, “beforeend”, “afterend”). En la situación del OP, usaría “beforeend”. El segundo parámetro es solo la cadena html.

Uso básico:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

  • Acabo de probar su solución, así como la aceptada. Ambos funcionan, pero el tuyo tiene solo 2 líneas y sin bucles. Suena como un ganador para mi.

    – Corwin01

    8 mayo 2012 a las 23:45

  • Para referencia a cualquiera que pueda elegir esta ruta: este método no funciona bien con las tablas en IE9.

    – Corwin01

    17 mayo 2012 a las 15:49

  • En Chrome me dice Uncaught TypeError: undefined is not a function !

    – J86

    20 de noviembre de 2014 a las 12:54

  • Esta joya escondida necesita más exposición.

    – set

    8 de enero de 2015 a las 0:16

  • bastante molesto que este método no se autocompleta en la consola web de Chrome. v79

    – lasec0203

    28 de diciembre de 2019 a las 8:23

Avatar de usuario de Felix Kling
Félix Kling

Para dar una alternativa (como usar DocumentFragment no parece funcionar): puede simularlo iterando sobre los elementos secundarios del nodo recién generado y solo agregarlos.

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}

  • Pensé que estamos buscando una solución que no use “innerHTML”

    – kennydelacruz

    18 oct 2018 a las 21:41

  • @kennydelacruz: El OP no quería adjuntar nuevo HTML a un HTML existente porque destruye y recrea los elementos existentes. El OP encontró una solución al crear un nuevo elemento y agregarlo, pero no querían agregar un elemento adicional. Acabo de extender esa solución para mostrar que pueden mover/agregar los elementos recién creados, que no afectan a los elementos existentes.

    – Félix Kling

    19 de octubre de 2018 a las 3:52

  • Sé que esto es antiguo, pero ¿alguien puede explicarme por qué se puede iterar sobre e.firstChild?

    – Tostadas

    18 de abril de 2019 a las 9:14

  • @Toastgeraet: este es un ejemplo que no está iterando sobre e.firstChild. Más bien, comprueba si e tiene un hijo y si es así, Muevete ese niño al elemento.

    – Félix Kling

    18 de abril de 2019 a las 18:04

alnafie tiene una gran respuesta para esta pregunta. Quería dar un ejemplo de su código como referencia:

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}
body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}
<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

Esperemos que esto sea útil para otros.

  • Odio ser estricto con las reglas, pero creo que hubiera sido mejor si hubieras creado una demostración (jsfiddle, codepen, etc.) y luego la hubieras agregado a la respuesta de Alnafie usando la función de edición o enviando un comentario. Crear una respuesta solo para demostrar la respuesta de otro usuario no es cómo funciona SO, independientemente de cuán útil sea la información que proporcionó. Imagínese si cada usuario decidiera demostrar otra respuesta creando una respuesta: se complicaría.

    – Martín James

    23 de julio de 2018 a las 11:13


Avatar de usuario de Raynos
Raynos

Esto es lo que DocumentFragment estaba destinado a.

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);

document.createDocumentFragment, .childNodes

<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

asigne los datos para div con el símbolo “+=”, puede agregar datos, incluidos los datos html anteriores

  • La pregunta requiere específicamente no usando element.innerHTML += data.

    – musica nada

    18 de junio de 2015 a las 22:47

Avatar de usuario de John
John

Como pescar y mientras usa un código estricto. Hay dos funciones de requisito previo necesarias en la parte inferior de esta publicación.

xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

Agregue varios elementos (el espacio de nombres solo debe estar en el elemento principal):

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

Código reutilizable dinámico:

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}

  • La pregunta requiere específicamente no usando element.innerHTML += data.

    – musica nada

    18 de junio de 2015 a las 22:47

¿Ha sido útil esta solución?