Tres formas de crear documentos HTML sobre la marcha

Creando documentos HTML sobre la marcha, Con o sin JavaScript, a veces es necesario. Si el objetivo es mostrar una página de acuse de recibo o un iframe que contenga una página completa, si el documento es lo suficientemente simple, puede ser fácilmente armado y servido con URL de datos o JavaScript.

Pero, ¿cómo lo haces? Estoy seguro de que ya sabe cómo agregar HTML a un documento usando JavaScript, pero crear un documento HTML completo? Quizás te interesen algunos de los métodos que mostraré a continuación, el primero de los cuales ni siquiera necesita JavaScript!

Mostraré todos los documentos recién creados. en iframes para que pudieras verlos rendidos. Sin embargo, puede utilizar los documentos como mejor le parezca. Por ejemplo, pueden ser guardado en una base de datos o enviado a través de servicios web para ser prestado en otro lugar.

1. URLs de datos

URLs de datos Proporcionarle un método simple y eficaz para Servir documentos en una página web.. Si no está familiarizado con esto, lea nuestro artículo anterior sobre cómo funcionan..

Básicamente, URLs de datos comenzar con el datos: Esquema de URL. Es seguido por el contenido para ser servido, antes de que opcionalmente se puede mencionar el tipo de medio y el codificación del contenido.

Es posible que haya visto imágenes servidas de esta manera, donde caracteres base64 se dan como el contenido de la URL de datos, siguiendo un tipo de medio.

El código anterior muestra una imagen PNG del hombre con un emoji de computadora portátil; puede verificarlo en su navegador.

Similar a como se hace esto, URLs de datos también pueden servir documentos HTML:

El iframe representa el documento HTML que se agregó utilizando la URL de datos que contiene el texto / html tipo de medio y seguido por el código HTML.

Puede editar la demostración de Codepen a continuación agregando HTML adicional si desea ver cómo funciona la técnica.

2. Interfaz de implementación de DOM

Implementación de DOM es una interfaz que puede crear nuevos documentos usando ya sea su crearDocumento () (para XML) o createHTMLDocument () Método, lo que necesites. Se accede a la interfaz usando el documento.implementación objeto.

los createHTMLDocument () método toma un parámetro opcional Cuál es el Título del nuevo documento..

Usted puede agregar HTML a un documento recién creado de la misma manera que lo hace habitualmente: usando métodos como adjuntar(), añadir Niño(), y otros métodos de JavaScript relacionados con DOM.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('Hello World!'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

En el código de arriba, un Se crea nuevo documento HTML utilizando la createHTMLDocument () método de la Implementación de DOM interfaz y la Hola Mundo! cadena es añadido a su elemento cuerpo.

Luego, para ver cómo se ve el documento recién creado cuando se procesa, reemplacé el elemento de documento del iframe (iframeDoc.documentElement) con el elemento de documento del nuevo documento (doc.documentElement) utilizando la replaceChild () método. De esta manera, podrás ser capaz de ver el Hola Mundo! cuerda Del documento que creamos y agregamos al iframe..

3. DOMParser API

Como su nombre lo indica, el DOMParser API analiza cadenas HTML / XML en documentos DOM.

Un nuevo DOMParser instancia de objeto Se puede crear utilizando su constructor., DOMParser (). La instancia contiene un método llamado parseFromString () ese hace el análisis después de tomar dos argumentos: la cadena que se analizará y el tipo de documento del documento que se creará.

 window.onload = () => var parser = new DOMParser (); var doc = parser.parseFromString ('Hola Mundo! ', "texto / html"); doc.body.append ('texto extra'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

En el código anterior, una nueva DOMParser ejemplo analiza una cadena HTML a un documento DOM utilizando la parseFromString () método.

Luego, de la misma manera que en el fragmento de código anterior, el elemento de documento del documento recién creado reemplaza el elemento de documento del iframe. Como resultado, el código HTML en el documento que creamos se hace visible en el iframe.