Drie manieren om HTML-documenten on the fly te maken

Het is soms nodig om HTML-documenten direct te maken, met of zonder JavaScript. Of het doel nu is om een ​​bevestigingspagina of een iframe met een hele pagina weer te geven, als het document eenvoudig genoeg is, kan het eenvoudig worden samengevoegd en worden aangeboden met gegevens-URL's of JavaScript .

Maar hoe pak je het aan? Ik weet zeker dat je al weet hoe je HTML kunt toevoegen aan een document met JavaScript, maar om een ​​heel HTML-document te maken ? Mogelijk ben je geïnteresseerd in een aantal methoden die ik hieronder zal laten zien, waarvan de eerste zelfs geen JavaScript nodig heeft!

Ik zal alle nieuw gecreëerde documenten in iframes laten zien zodat je ze kunt laten weergeven. U kunt de documenten echter gebruiken zoals u wilt. Ze kunnen bijvoorbeeld in een database worden opgeslagen of via webservices worden verzonden om ergens anders te worden weergegeven.

1. Gegevens-URL's

Gegevens-URL's bieden u een eenvoudige en effectieve methode om documenten op een webpagina weer te geven . Als je er niet bekend mee bent, lees dan ons vorige artikel over hoe ze werken.

In principe beginnen gegevens-URL's met het data: URL-schema . Dit wordt gevolgd door de inhoud die moet worden weergegeven, waarna u optioneel het mediatype en de codering van de inhoud kunt vermelden .

Mogelijk hebt u afbeeldingen op deze manier gezien, waarbij base64-tekens worden weergegeven als de inhoud van de gegevens-URL, volgens een mediatype.

De bovenstaande code toont een PNG-afbeelding van de man met een laptop-emoji - u kunt deze in uw browser controleren.

Vergelijkbaar met hoe dit wordt gedaan, kunnen gegevens-URL's ook HTML-documenten weergeven :

Het iframe rendert het HTML-document dat is toegevoegd met behulp van de gegevens-URL die het text/html mediatype bevat en gevolgd door de HTML-code.

Je kunt de onderstaande demo van Codepen bewerken door er extra HTML aan toe te voegen als je wilt zien hoe de techniek werkt.

2. DOMImplementatie-interface

DOMImplementation is een interface waarmee u gloednieuwe documenten kunt maken met de createDocument() (voor XML) of de createHTMLDocument(), afhankelijk van wat u nodig hebt. De interface wordt geopend met behulp van het document.implementation object.

De createHTMLDocument() -methode neemt één optionele parameter die de titel van het nieuwe document is .

U kunt op dezelfde manier HTML toevoegen aan een nieuw document : met behulp van methoden zoals append(), appendChild() en andere DOM-gerelateerde JavaScript-methoden.

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

In de bovenstaande code wordt een nieuw HTML-document gemaakt met behulp van de createHTMLDocument() -methode van de DOMImplementation interface en de Hello World! string wordt toegevoegd aan het body-element .

Vervolgens, om te zien hoe het nieuw gemaakte document eruitziet wanneer het wordt weergegeven, heb ik het documentelement van het iframe ( iframeDoc.documentElement ) vervangen door het documentelement van het nieuwe document ( doc.documentElement ) met de methode replaceChild() . Op deze manier kun je de Hello World zien! string van het document dat we hebben gemaakt en toegevoegd aan het iframe.

3. DOMParser API

Zoals de naam al doet vermoeden, parseert de DOMParser API HTML / XML-strings in DOM-documenten .

Een nieuw DOMParser object kan worden gemaakt met de constructor DOMParser() . De instantie bevat een methode die parseFromString() die de parsering parseFromString() na het nemen van twee argumenten : de tekenreeks die moet worden geparseerd en het documenttype van het document dat moet worden gemaakt.

 window.onload = () => {var parser = new DOMParser (); var doc = parser.parseFromString (' Hello World! ', "text / html"); doc.body.append ('extra tekst'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement); } 

In de bovenstaande code parseert een nieuwe DOMParser instantie een HTML-tekenreeks in een DOM-document met de methode parseFromString() .

Vervolgens, op dezelfde manier als in het vorige codefragment, vervangt het documentelement van het nieuw gemaakte document het documentelement van het iframe . Als gevolg hiervan wordt de HTML-code in het document dat we hebben gemaakt zichtbaar in het iframe.