Main Menu

Three Ways to Create HTML Documents on the Fly

Creating HTML documents on the fly, with or without JavaScript, is sometimes necessary. Whether the goal is to display an acknowledgment page or an iframe containing a whole page, if the document is simple enough it can be easily put together and served with either data URLs or JavaScript.

But, how do you go about it? I’m sure you already know how to add HTML to a document using JavaScript, but to create a whole HTML document? You might be interested in some of the methods I’ll be showing below, the first of which doesn’t even need JavaScript!

I’ll show all the newly created documents in iframes so that you could see them rendered. However, you can use the documents however you see fit. For instance, they can be saved into a database or sent across web services to be rendered somewhere else.

1. Data URLs

Data URLs provide you with a simple and effective method to serve documents on a web page. If you aren’t familiar with it read our previous article on how they work.

Basically, data URLs start with the data: URL scheme. It’s followed by the content to be served, before which you can optionally mention the media type and the encoding of the content.

You might’ve seen images served this way, where base64 characters are given as the content of the data URL, following a media type.

<img src="data:image/png;base64,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"
alt="man with a computer">

The above code displays a PNG image of the man with a laptop emoji—you can check it in your browser.

Similar to how this is done, data URLs can also serve HTML documents:

<iframe src='data:text/html,<strong>Hello World!</strong>'></iframe>

The iframe renders the HTML document that was added using the data URL containing the text/html media type & followed by the HTML code.

You can edit the Codepen demo below by adding extra HTML to it if you want to see how the technique works.

In the code above, a new HTML document is created using the createHTMLDocument() method of the DOMImplementation interface and the Hello World! string is added to its body element.

Then, to see how the newly created document looks when it’s rendered, I replaced the document element of the iframe (iframeDoc.documentElement) with the document element of the new document (doc.documentElement) using the replaceChild() method. This way, you’ll be able to see the Hello World! string from the document we created and added to the iframe.

3. DOMParser API

As its name suggests, the DOMParser API parses HTML/XML strings into DOM documents.

A new DOMParser object instance can be created using its constructor, DOMParser(). The instance holds a method called parseFromString() that does the parsing after taking two arguments: the string to be parsed and the document type of the document to be created.

In the above code, a new DOMParser instance parses a HTML string to a DOM document using the parseFromString() method.

Then, in the same way as in the previous code snippet, the document element of the newly created document replaces the document element of the iframe. As a result, the HTML code in the document we created becomes visible in the iframe.