Drei Möglichkeiten, HTML-Dokumente schnell zu erstellen

HTML-Dokumente im Handumdrehen erstellen, mit oder ohne JavaScript ist manchmal notwendig. Unabhängig davon, ob das Ziel darin besteht, eine Bestätigungsseite oder einen Iframe mit einer ganzen Seite anzuzeigen. Wenn das Dokument einfach genug ist, kann es leicht sein zusammengestellt und mit entweder Daten-URLs oder JavaScript geliefert.

Aber wie gehen Sie das an? Ich bin mir sicher, dass Sie bereits wissen, wie Sie HTML-Code in ein Dokument einfügen, jedoch mit Erstellen Sie ein gesamtes HTML-Dokument? Möglicherweise interessieren Sie sich für einige der Methoden, die ich unten zeigen werde. Die erste Methode erfordert nicht einmal JavaScript!

Ich zeige alle neu erstellten Dokumente in iframes damit du sie gerendert sehen kannst. Sie können die Dokumente jedoch beliebig verwenden. Zum Beispiel können sie sein in einer Datenbank gespeichert oder über Web-Services gesendet woanders gerendert werden.

1. Daten-URLs

Daten-URLs Ihnen eine einfache und effektive Methode zur Verfügung stellen Dokumente auf einer Webseite ausgeben. Wenn Sie sich damit nicht auskennen, lesen Sie unseren vorherigen Artikel zur Funktionsweise.

Grundsätzlich Daten-URLs Beginnen Sie mit dem Daten: URL-Schema. Es folgt das Inhalt geliefert werden, vor dem können Sie optional das angeben Medientyp und das Kodierung des Inhalts.

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

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 gemacht wird, Daten-URLs können auch HTML-Dokumente bereitstellen:

Der iframe rendert das HTML-Dokument Das wurde mit der Daten-URL hinzugefügt, die die Text / HTML Medientyp & gefolgt vom HTML-Code.

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

2. DOMImplementation-Schnittstelle

DOMImplementierung ist eine Schnittstelle, die das kann Erstellen Sie neue Dokumente entweder seine verwenden createDocument () (für XML) oder createHTMLDocument () Methode-was auch immer Sie brauchen. Der Zugriff auf die Schnittstelle erfolgt mit dokument.implementierung Objekt.

Das createHTMLDocument () Methode nimmt einen optionalen Parameter Welches ist das Titel des neuen Dokuments.

Sie können Fügen Sie einem neu erstellten Dokument HTML hinzu auf die gleiche Weise, wie Sie es normalerweise tun: mit Methoden wie anhängen (), appendChild (), und andere DOM-bezogene JavaScript-Methoden.

 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 a neues HTML-Dokument wird erstellt Verwendung der createHTMLDocument () Methode der DOMImplementierung Schnittstelle und die Hallo Welt! String ist zu seinem Körperelement hinzugefügt.

Um zu sehen, wie das neu erstellte Dokument beim Rendern aussieht, habe ich das Dokumentelement des iframe ersetzt (iframeDoc.documentElement) mit dem Dokumentelement des neuen Dokuments (doc.documentElement) Verwendung der replaceChild () Methode. Auf diese Weise wirst du in der Lage sein, das zu sehen Hallo Welt! Schnur aus dem Dokument, das wir erstellt und dem iframe hinzugefügt haben.

3. DOMParser-API

Wie der Name schon sagt, die DOMParser API analysiert HTML / XML-Zeichenfolgen in DOM-Dokumente.

Ein neuer DOMParser Objektinstanz kann mit seinem Konstruktor erstellt werden, DOMParser (). Die Instanz enthält eine aufgerufene Methode parseFromString () Das macht das Parsen nach zwei Argumenten: die zu analysierende Zeichenfolge und der 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 ein neuer DOMParser Beispiel analysiert eine HTML-Zeichenfolge in ein DOM-Dokument Verwendung der parseFromString () Methode.

Dann, wie im vorherigen Codeausschnitt, das Dokumentelement des neu erstellten Dokuments ersetzt das Dokumentelement des iframe. Dadurch wird der HTML-Code in dem von uns erstellten Dokument im iframe sichtbar.