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.

10 artilugios de viaje que te darán paz mental

Viajar es genial, pero un solo incidente puede convertirlo en una pesadilla . Ya sea que te roben, te roben, o pierdas tus objetos de valor, tu viaje divertido puede convertirse fácilmente en un desastre. Por lo tanto, si eres un viajero ávido y quieres mantenerte a ti mismo y tus pertenencias a salvo, puedes utilizar algunos dispositivos de seguridad útiles diseñados para que tus viajes sean seguros.Des

(Consejos de tecnología y diseño)

Conoce a Yarn: el administrador de paquetes JavaScript más nuevo desarrollado por Facebook

La mayoría de los desarrolladores de frontend ya conocen npm, que es el administrador de paquetes impulsado por Nodo para bibliotecas, frameworks y complementos de JavaScript. Este es el administrador de paquetes más utilizado por los desarrolladores web, pero Facebook ha creado un nuevo administrador de paquetes llamado Yarn, que se está convirtiendo rápidamente en el rival de npm .Con

(Consejos de tecnología y diseño)