Tre sätt att skapa HTML-dokument på flugan

Skapa HTML-dokument på flugan, med eller utan JavaScript, är ibland nödvändig. Oavsett om målet är att visa en bekräftelsida eller en iframe som innehåller en hel sida, om dokumentet är tillräckligt enkelt så kan det enkelt sätta ihop och serveras med antingen webbadresser eller JavaScript.

Men hur går det med det? Jag är säker på att du redan vet hur man lägger till HTML i ett dokument med hjälp av JavaScript, men till skapa ett helt HTML-dokument? Du kanske är intresserad av några av de metoder som jag kommer att visa nedan, den första som inte ens behöver JavaScript!

Jag visar alla nyskapade dokument i iframes så att du kunde se dem gjorda. Du kan dock använda dokumenten men du passar dig. Till exempel kan de vara sparas i en databas eller skickas över webbtjänster att göras någon annanstans.

1. Dataadresser

Dataadresser ge dig en enkel och effektiv metod att Servera dokument på en webbsida. Om du inte är bekant med det, läs vår tidigare artikel om hur de fungerar.

I grund och botten dataadresser börja med data: URL-schema. Det följs av innehåll som ska serveras, för vilken du eventuellt kan nämna Mediatyp och den kodning av innehållet.

Du kanske har sett bilder som serveras här, var base64 tecken anges som innehållet i dataadressen, efter en medietyp.

Ovanstående kod visar en PNG-bild av mannen med en bärbar dator-emoji-du kan kontrollera den i din webbläsare.

Liknande hur det här görs, data-URL-adresser kan också visa HTML-dokument:

Iframe gör HTML-dokumentet som lagts till med dataadressen som innehåller text / html medietyp och följt av HTML-koden.

Du kan redigera Codepen demo nedan genom att lägga till extra HTML till den om du vill se hur tekniken fungerar.

2. DOMImplementeringsgränssnitt

DOMImplementation är ett gränssnitt som kan skapa helt nya dokument använder antingen sin createDocument () (för XML) eller createHTMLDocument () metod - beroende på vad du behöver. Gränssnittet nås med hjälp av document.implementation objekt.

De createHTMLDocument () metod tar en valfri parameter vilken är titeln på det nya dokumentet.

Du kan lägg till HTML till ett nyskapat dokument På samma sätt som du brukar göra: genom att använda metoder som bifoga(), appendChild (), och andra DOM-relaterade JavaScript-metoder.

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

I koden ovan, a nytt HTML-dokument skapas använda createHTMLDocument () metod för DOMImplementation gränssnitt och Hej världen! strängen är läggs till sitt kroppselement.

Sedan, för att se hur det nyskapade dokumentet ser ut när det görs, ersatte jag dokumentelementet i iframe (iframeDoc.documentElement) med dokumentelementet i det nya dokumentet (doc.documentElement) använda replaceChild () metod. På så sätt kommer du kunna se Hej världen! sträng från det dokument vi skapade och lagde till iframe.

3. DOMParser API

Som namnet antyder, den DOMParser API analyserar HTML / XML-strängar i DOM-dokument.

En ny DOMParser objekt förekomst kan skapas med hjälp av sin konstruktör, DOMParser (). Exemplet innehåller en metod som heter parseFromString () den där analyserar efter att ha tagit två argument: strängen som ska analyseras och dokumenttypen för dokumentet som ska skapas.

 window.onload = () => var parser = ny DOMParser (); var doc = parser.parseFromString ('Hej världen! ',' text / html '); doc.body.append ("extra text"); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

I ovanstående kod, en ny DOMParser exempel analyserar en HTML-sträng till ett DOM-dokument använda parseFromString () metod.

Därefter, på samma sätt som i föregående kodbit, dokumentelementet i det nyligen skapade dokumentet ersätter dokumentelementet i iframe. Som ett resultat blir HTML-koden i det dokument vi skapade synlig i iframe.