Drei Möglichkeiten zum Erstellen von HTML-Dokumenten im Handumdrehen

Es ist manchmal notwendig, HTML-Dokumente mit oder ohne JavaScript zu erstellen. Ob das Ziel darin besteht, eine Bestätigungsseite oder einen iFrame anzuzeigen, der eine ganze Seite enthält, wenn das Dokument einfach genug ist, kann es einfach zusammengestellt und entweder mit Daten-URLs oder JavaScript bedient werden .

Aber wie gehst du vor? Ich bin mir sicher, dass Sie bereits wissen, wie Sie HTML mithilfe von JavaScript zu einem Dokument hinzufügen, aber ein ganzes HTML-Dokument erstellen können . Sie könnten sich für einige der Methoden interessieren, die ich unten zeigen werde, von denen die erste nicht einmal JavaScript benötigt!

Ich zeige alle neu erstellten Dokumente in Iframes, damit Sie sie gerendert sehen können. Sie können die Dokumente jedoch so verwenden, wie Sie es für richtig halten. Zum Beispiel können sie in einer Datenbank gespeichert oder über Web-Services gesendet werden, um woanders gerendert zu werden.

1. Daten URLs

Daten-URLs bieten Ihnen eine einfache und effektive Methode zum Bereitstellen von Dokumenten auf einer Webseite . Wenn Sie nicht damit vertraut sind, lesen Sie unseren vorherigen Artikel, wie sie funktionieren.

Grundsätzlich beginnen Daten-URLs mit dem data: URL-Schema . Es folgt der zu versorgende Inhalt, vor dem Sie optional den Medientyp und die Codierung des Inhalts angeben können .

Möglicherweise haben Sie auf diese Weise Bilder gesehen, bei denen Base64-Zeichen als Inhalt der Daten-URL nach einem Medientyp angegeben werden.

Der obige Code zeigt ein PNG-Bild des Mannes mit einem Laptop-Emoji - Sie können es in Ihrem Browser überprüfen.

Ähnlich wie dies geschieht, können Daten-URLs auch HTML-Dokumente bereitstellen :

Der iframe rendert das hinzugefügte HTML-Dokument mit der Daten-URL, die den text/html Medientyp enthält, gefolgt vom HTML-Code.

Sie können die unten stehende Codepen-Demo bearbeiten, indem Sie zusätzliches HTML hinzufügen, wenn Sie sehen möchten, wie die Technik funktioniert.

2. DOMImplementation-Schnittstelle

DOMImplementation ist eine Schnittstelle, mit der Sie neue Dokumente entweder mit der createDocument() (für XML) oder createHTMLDocument() erstellen können , je nachdem, was Sie benötigen. Der Zugriff auf die Schnittstelle erfolgt über das Objekt document.implementation .

Die Methode createHTMLDocument() verwendet einen optionalen Parameter, der den Titel des neuen Dokuments darstellt .

Sie können HTML zu einem neu erstellten Dokument genauso hinzufügen, wie Sie es normalerweise tun: indem Sie Methoden wie append(), appendChild() und andere DOM-bezogene JavaScript-Methoden verwenden.

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

Im obigen Code wird ein neues HTML-Dokument mit der createHTMLDocument() Methode der DOMImplementation Schnittstelle und dem Hello World! DOMImplementation string wird zu seinem body-Element hinzugefügt .

Um zu sehen, wie das neu erstellte Dokument aussieht, wenn es gerendert wird, ersetzte ich das Dokumentelement des iframe ( iframeDoc.documentElement ) durch das Dokumentelement des neuen Dokuments ( doc.documentElement ) mithilfe der replaceChild() -Methode. Auf diese Weise können Sie die Hello World sehen! Zeichenfolge aus dem Dokument, das wir erstellt und dem iFrame hinzugefügt haben.

3. DOMParser-API

Wie der Name vermuten lässt, analysiert die DOMParser API HTML / XML-Strings in DOM-Dokumente .

Eine neue DOMParser Objektinstanz kann mit dem Konstruktor DOMParser() . Die Instanz enthält eine Methode namens parseFromString(), die das Parsing nach zwei Argumenten parseFromString() : der zu analysierenden Zeichenfolge und dem Dokumenttyp des zu erstellenden Dokuments.

 window.onload = () => {var parser = neuer DOMParser (); var doc = parser.parseFromString (' Hallo Welt! ', "text / html"); doc.body.append ('zusätzlicher Text'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement); } 

Im obigen Code analysiert eine neue DOMParser Instanz eine HTML-Zeichenfolge mithilfe der parseFromString() -Methode in einem DOM-Dokument .

Auf dieselbe Weise wie im vorherigen Codefragment ersetzt das Dokumentelement des neu erstellten Dokuments das Dokumentelement des IFrames . Als Ergebnis wird der HTML-Code in dem von uns erstellten Dokument im Iframe sichtbar.