Agregar HTML al elemento contenedor sin internalHTML
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 medios dinámicos como 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 esa etiqueta de extensión adicional en el documento que no quiero.
¿Cómo se puede hacer esto entonces? ¡Gracias!
Mira el insertAdjacentHTML()método . El primer parámetro es donde desea que se agregue y tome la cadena ("beforebegin", "afterbegin", "beforeend", "afterend"). En la situación del OP, usarías "beforeend". El segundo parámetro es sólo la cadena html.
Uso básico:
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
Para dar una alternativa (ya que el uso DocumentFragmentno parece funcionar): puede simularlo iterando sobre los hijos del nodo recién generado y solo agregándolos.
var e = document.createElement('div');
e.innerHTML = htmldata;
while(e.firstChild) {
element.appendChild(e.firstChild);
}
