Tres formas de crear documentos HTML sobre la marcha

La creación de documentos HTML sobre la marcha, con o sin JavaScript, a veces es necesaria. 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 juntarse y enviarse fácilmente con URL de datos o JavaScript .

Pero, ¿cómo lo haces? Estoy seguro de que ya sabes cómo agregar HTML a un documento utilizando JavaScript, pero para crear un documento HTML completo . Es posible que le 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 pueda verlos renderizados. Sin embargo, puede usar los documentos como mejor le parezca. Por ejemplo, pueden guardarse en una base de datos o enviarse a través de servicios web para ser traducidos en otro lugar.

1. URLs de datos

Las URL de datos le proporcionan un método simple y efectivo para servir documentos en una página web . Si no está familiarizado con él, lea nuestro artículo anterior sobre cómo funcionan.

Básicamente, las URL de datos comienzan con los data: esquema de URL . Le sigue el contenido que se va a servir, antes de lo cual puede mencionar opcionalmente el tipo de medio y la codificación del contenido .

Es posible que haya visto imágenes servidas de esta manera, donde los caracteres base64 se proporcionan 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 portátil: puede verificarlo en su navegador.

El iframe representa el documento HTML que se agregó utilizando la URL de datos que contiene el tipo de text/html 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 DOMImplementación

DOMImplementation es una interfaz que puede crear documentos completamente nuevos utilizando su createDocument() (para XML) o createHTMLDocument(), lo que sea que necesite. Se accede a la interfaz usando el objeto document.implementation .

El método createHTMLDocument() toma un parámetro opcional que es el título del nuevo documento .

Puede agregar HTML a un documento recién creado de la misma manera que normalmente lo hace: mediante el uso de métodos como append(), appendChild() y otros métodos de JavaScript relacionados con DOM.

 window.onload = () => {var doc = document.implementation.createHTMLDocument (); doc.body.append ('¡Hola mundo!'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement); } 

En el código anterior, se crea un nuevo documento HTML utilizando el método createHTMLDocument() de la interfaz DOMImplementation y Hello World. cadena se agrega a su elemento de cuerpo .

Luego, para ver cómo se ve el documento recién creado cuando se procesa, reemplacé el elemento del documento del iframe ( iframeDoc.documentElement ) con el elemento del documento nuevo ( doc.documentElement ) utilizando el método replaceChild() . ¡De esta manera, podrás ver el Hello World! cadena del documento que creamos y agregamos al iframe.

3. DOMParser API

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

Se puede crear una nueva instancia de objeto DOMParser usando su constructor, DOMParser() . La instancia contiene un método llamado parseFromString() que realiza 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 = nuevo DOMParser (); var doc = parser.parseFromString (' Hello World! ', "text / 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 instancia DOMParser analiza una cadena HTML en un documento DOM utilizando el método parseFromString() .

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

Cómo crear un logotipo de fuente RSS con CSS3

Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie. El logotipo de RSS es uno de los logotipos más utilizados en diseño web, debido a la función a la que se refiere. Viste

(Consejos de tecnología y diseño)

20 Manipulaciones fotográficas creativas de "Big Head"

Todo comenzó a partir de Christopher Huet, un talentoso maestro de la manipulación que quiere divertirse seriamente con la cabeza humana, y lo hizo con mucho éxito al hacerlo más grande, sí, simplemente más grande. ¡Y lo que realmente sorprende es ampliar la cabeza, es suficiente para hacer que uno se eche a reír!Y ya sa

(Consejos de tecnología y diseño)