Estoy tratando de usar JavaScript nativo para agregar una cadena de html a un div de destino. Esto funciona bien usando:

var selector = document.getElementById('divid');
var str = '<div><h1>string of html content</h1></div>';
selector.innterHTML += str;

Excepto cuando el documento contiene un iframe, parece ocultar el marco al agregar el innerhtml. Intenté solucionarlo de la siguiente manera:

var selector = document.getElementById('divid');
var str = '<div><h1>string of html content</h1></div>';
var div = document.createElement('div');
div.innerHTML = str;
selector.appendChild(div);

Esto funciona pero ahora estoy creando un contenedor div innecesario, ¿hay alguna manera de hacerlo sin crear un nuevo elemento que no borre el iframe?

1
user1572796 5 sep. 2014 a las 00:51

2 respuestas

La mejor respuesta

Excepto cuando el documento contiene un iframe, parece ocultar el marco al agregar innerhtml

Consulte "innerHTML + = ..." vs "appendChild (txtNode)" para conocer el motivo: modificar innerHTML crea un nuevo iframe que se recarga. También eche un vistazo a ¿Qué es mejor, agregar nuevos elementos a través de funciones DOM o agregar cadenas con etiquetas HTML?

Esto funciona pero ahora estoy creando un contenedor div innecesario

Simplemente no cree un div adicional, de todos modos tiene uno en su HTML:

var selector = document.getElementById('divid');
var div = selector.appendChild(document.createElement('div'));
div.innerHTML = '<h1>string of html content</h1>';

¿Hay alguna manera de hacer esto sin crear un nuevo elemento que no borre el iframe?

También puede usar el método nativo insertAdjacentHTML que es el equivalente a append de jQuery con una cadena HTML:

var selector = document.getElementById('divid');
selector.insertAdjacentHTML('beforeend', '<div><h1>string of html content</h1></div>');
2
Community 23 may. 2017 a las 11:43

Esto parece funcionar.

var parser = new DOMParser();
var el = parser.parseFromString(str, "text/html");
selector.appendChild(el.childNodes[0]);
0
Unihedron 6 sep. 2014 a las 11:35