Three Ways to Create HTML Documents on the Fly

By . in Coding. Updated on .

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.

Read Also: How to Use HTML <template> & <slot> With Shadow DOM

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.

Data URL example with Base64 images

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.

2. DOMImplementation interface

DOMImplementation is an interface that can create brand new documents using either its createDocument() (for XML) or createHTMLDocument() method—whichever you need. The interface is accessed using the document.implementation object.

The createHTMLDocument() method takes one optional parameter which is the title of the new document.

You can add HTML to a newly created document the same way you usually do: by using methods such as append(), appendChild(), and other DOM-related JavaScript methods.

<iframe src=""></iframe>

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

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.

<iframe src=""></iframe>

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

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.

Read Also: Understanding Document Object Model (DOM) in Details

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail