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 plugins de WordPress para una mejor administración de back-end

Una de las mejores partes de WordPress es lo fácil que es personalizar con complementos . Para ilustrar su flexibilidad, aquí hay algunos ejemplos de lo que puede hacer en su sitio de WordPress con complementos:Administrar contenido frontendDetectar código maliciosoMejorar el rendimiento de la imagenAdministrar blog de autor múltipleMejora la gestión de usuariosA pesar de que WordPress está diseñado para atender tantos escenarios como sea posible, es posible que desee cambiar cosas como eliminar un menú del Tablero para usuarios particulares, o simplificar el backend para usuarios menos conoced

(Consejos de tecnología y diseño)

Cómo ejecutar aplicaciones de Windows en Android con Wine 3.0

Wine es una de mis herramientas imprescindibles para trabajar en Linux. Si no conoces a Wine, es una capa de compatibilidad entre Windows y Linux, que cierra la brecha entre los dos y permite que las aplicaciones de Windows funcionen en Linux ; casi mágicamenteSi bien Wine ha estado disponible desde hace mucho tiempo, su publicación de fin de año trajo una importante actualización: compatibilidad con Android . Es

(Consejos de tecnología y diseño)