Três maneiras de criar documentos HTML na mosca

Criando documentos HTML dinamicamente, com ou sem JavaScript, às vezes é necessário. Se o objetivo é exibir uma página de confirmação ou um iframe contendo uma página inteira, se o documento for simples o suficiente, pode ser facilmente juntos e servidos com URLs de dados ou JavaScript.

Mas como você faz isso? Tenho certeza que você já sabe como adicionar HTML a um documento usando JavaScript, mas criar um documento HTML inteiro? Você pode estar interessado em alguns dos métodos que mostrarei abaixo, o primeiro dos quais nem precisa de JavaScript!

Eu vou mostrar todos os documentos recém-criados em iframes para que você pudesse vê-los renderizados. No entanto, você pode usar os documentos da maneira que achar melhor. Por exemplo, eles podem ser salvo em um banco de dados ou enviado através de serviços da web para ser processado em outro lugar.

1. URLs de dados

URLs de dados fornecer-lhe um método simples e eficaz para servir documentos em uma página da web. Se você não estiver familiarizado com ele, leia nosso artigo anterior sobre como eles funcionam.

Basicamente, URLs de dados comece com o dados: Esquema de URL. É seguido pelo conteúdo a ser servido, antes que você pode, opcionalmente, mencionar o tipo de mídia e a codificação do conteúdo.

Você pode ter visto imagens servidas dessa maneira, onde caracteres base64 são fornecidos como o conteúdo do URL de dados, seguindo um tipo de mídia.

O código acima exibe uma imagem PNG do homem com um emoji de laptop - você pode verificá-lo no seu navegador.

Similar a como isso é feito, URLs de dados também podem servir documentos HTML:

O iframe renderiza o documento HTML que foi adicionado usando o URL de dados que contém o text / html tipo de mídia e seguido pelo código HTML.

Você pode editar o demo Codepen abaixo, adicionando HTML extra para ele, se você quiser ver como a técnica funciona.

2. interface DOMImplementation

DOMImplementation é uma interface que pode criar novos documentos usando seu createDocument () (para XML) ou createHTMLDocument () método, o que você precisa. A interface é acessada usando o document.implementation objeto.

o createHTMLDocument () método leva um parâmetro opcional qual é o título do novo documento.

Você pode adicionar HTML a um documento recém-criado da mesma maneira que você costuma fazer: usando métodos como acrescentar(), appendChild (), e outros métodos JavaScript relacionados a 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);  

No código acima, um novo documento HTML é criado usando o createHTMLDocument () método do DOMImplementation interface e o Olá Mundo! string é adicionado ao seu elemento corporal.

Então, para ver como o documento recém-criado aparece quando é renderizado, substituí o elemento do documento do iframe (iframeDoc.documentElement) com o elemento do documento do novo documento (doc.documentElement) usando o replaceChild () método. Dessa forma, você vai ser capaz de ver o Olá Mundo! corda do documento que criamos e adicionamos ao iframe.

3. API DOMParser

Como o próprio nome sugere, o DOMParser API analisa strings HTML / XML em documentos DOM.

Um novo DOMParser instância do objeto pode ser criado usando seu construtor, DOMParser (). A instância contém um método chamado parseFromString () naquela faz a análise depois de tomar dois argumentos: a string a ser analisada e o tipo de documento do documento a ser criado.

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

No código acima, um novo DOMParser instância analisa uma string HTML para um documento DOM usando o parseFromString () método.

Em seguida, da mesma forma que no trecho de código anterior, o elemento do documento do documento recém-criado substitui o elemento do documento do iframe. Como resultado, o código HTML no documento que criamos fica visível no iframe.