Trois façons de créer des documents HTML à la volée

Création de documents HTML à la volée, avec ou sans JavaScript, est parfois nécessaire. Que l’objectif soit d’afficher une page de remerciement ou une iframe contenant une page entière, si le document est assez simple, il peut être facilement mis en place et servi avec des URL de données ou JavaScript.

Mais comment vous y prenez-vous? Je suis sûr que vous savez déjà comment ajouter du HTML à un document en utilisant JavaScript, mais créer un document HTML complet? Certaines des méthodes que je vais montrer ci-dessous pourraient vous intéresser, la première ne nécessitant même pas JavaScript.!

Je montrerai tous les documents nouvellement créés en iframes afin que vous puissiez les voir rendus. Cependant, vous pouvez utiliser les documents comme bon vous semble. Par exemple, ils peuvent être enregistré dans une base de données ou envoyé à travers des services Web être rendu ailleurs.

1. URL de données

URL de données vous fournir une méthode simple et efficace pour servir des documents sur une page Web. Si vous ne le connaissez pas, lisez notre article précédent sur leur fonctionnement..

Fondamentalement, les URL de données commencer par le Les données: Schéma d'URL. Il est suivi par le contenu à servir, devant lequel vous pouvez éventuellement mentionner le type de support et le encodage du contenu.

Vous avez peut-être vu des images servies de cette façon, où caractères base64 sont donnés comme contenu de l'URL de données, suivant un type de média.

Le code ci-dessus affiche une image PNG de l'homme avec un emoji pour ordinateur portable. Vous pouvez le vérifier dans votre navigateur..

Similaire à la façon dont cela est fait, Les URL de données peuvent également servir des documents HTML:

L'iframe rend le document HTML qui a été ajouté en utilisant l'URL de données contenant le texte / html type de média et suivi du code HTML.

Vous pouvez éditer la démo Codepen ci-dessous en y ajoutant du HTML supplémentaire si vous voulez voir comment fonctionne la technique..

2. Interface DOMImplementation

DOMImplementation est une interface qui peut créer de nouveaux documents en utilisant soit createDocument () (pour XML) ou createHTMLDocument () méthode, selon vos besoins. On accède à l’interface en utilisant le document.implementation objet.

le createHTMLDocument () méthode prend un paramètre optionnel qui est le titre du nouveau document.

Vous pouvez ajouter du HTML à un document nouvellement créé comme vous le faites habituellement: en utilisant des méthodes telles que ajouter(), appendChild (), et d'autres méthodes JavaScript liées à 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);  

Dans le code ci-dessus, un nouveau document HTML est créé en utilisant le createHTMLDocument () méthode du DOMImplementation interface et la Bonjour le monde! la chaîne est ajouté à son élément de corps.

Ensuite, pour voir à quoi ressemble le document nouvellement créé lorsqu’il est rendu, j’ai remplacé l’élément document de iframe (iframeDoc.documentElement) avec l'élément de document du nouveau document (doc.documentElement) en utilisant le replaceChild () méthode. De cette façon, tu vas être capable de voir le Bonjour le monde! chaîne à partir du document que nous avons créé et ajouté à l'iframe.

3. API DOMParser

Comme son nom l'indique, le DOMParser API analyse les chaînes HTML / XML dans les documents DOM.

Un nouveau DOMParser instance d'objet peut être créé en utilisant son constructeur, DOMParser (). L'instance détient une méthode appelée parseFromString () cette fait l'analyse après avoir pris deux arguments: la chaîne à analyser et le type de document du document à créer.

 window.onload = () => var analyseur = new DOMParser (); var doc = parser.parseFromString ('Bonjour le monde! ', "text / html"); doc.body.append ('texte supplémentaire'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Dans le code ci-dessus, un nouveau DOMParser exemple analyse une chaîne HTML dans un document DOM en utilisant le parseFromString () méthode.

Ensuite, de la même manière que dans l’extrait de code précédent, l’élément document du nouveau document créé remplace l'élément de document de l'iframe. En conséquence, le code HTML du document créé devient visible dans l’iframe..