{"id":42944,"date":"2018-01-15T21:01:59","date_gmt":"2018-01-15T13:01:59","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=42944"},"modified":"2025-04-04T02:51:21","modified_gmt":"2025-04-03T18:51:21","slug":"create-html-documents-on-the-fly","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/","title":{"rendered":"Three Ways to Create HTML Documents on the Fly"},"content":{"rendered":"<p><strong>Creating HTML documents on the fly<\/strong>, 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 <strong>put together and served with either data URLs or JavaScript<\/strong>.<\/p>\n<p>But, how do you go about it? I\u2019m sure you already know how to add HTML to a document using JavaScript, but to <strong>create a whole HTML document<\/strong>? You might be interested in some of the methods I\u2019ll be showing below, the first of which doesn\u2019t even need JavaScript!<\/p>\n<p>I\u2019ll show all the newly created documents <strong>in iframes<\/strong> so that you could see them rendered. However, you can use the documents however you see fit. For instance, they can be <strong>saved into a database<\/strong> or <strong>sent across web services<\/strong> to be rendered somewhere else.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/\" rel=\"noopener\">How to Use HTML &lt;template&gt; & &lt;slot&gt; With Shadow DOM<\/a><\/p>\n<h2>1. Data URLs<\/h2>\n<p><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Basics_of_HTTP\/Data_URIs\" target=\"_blank\" rel=\"noopener\">Data URLs<\/a><\/strong> provide you with a simple and effective method to <strong>serve documents on a web page<\/strong>. If you aren\u2019t familiar with it read our <a href=\"https:\/\/www.hongkiat.com\/blog\/css-encoded-image\/\">previous article<\/a> on how they work.<\/p>\n<p>Basically, data URLs <strong>start with the <code>data:<\/code> URL scheme<\/strong>. It\u2019s followed by the <strong>content to be served<\/strong>, before which you can optionally mention the <strong>media type<\/strong> and the <strong>encoding of the content<\/strong>.<\/p>\n<p>You might\u2019ve seen images served this way, where <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WindowBase64\/Base64_encoding_and_decoding\" target=\"_blank\" rel=\"noopener\">base64 characters<\/a><\/strong> are given as the content of the data URL, following a media type.<\/p>\n<pre>\r\n&lt;img src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAC\/VBMVEUAAADphwDqhwDqiAD7kADqiAABi8nqiADP2N0AitnqiADriAD5wTXQ2t3ohwDvmxMBi8nqiADriADohgDlhgDlhQDU2Nj1vCzP2N31vCznhgABi8n2vCzqiAACi8n0vSz2vCvP2N7riADQ2d3qiQAAi8kAjMrvvjDzmhzqiAD1vCzP2d3Q2N31vCzO2N31vCzP2N3mhwDO2N7Q2N3wryAAiszOzufP2N39ykfP2N31vCyPwNf2vCzriAD+y0cBi8n1vCzqiADP2N3P2Nz2vjDqiADriQD2vSvO2N0Aisn0uyvQ2d70vCvriQDkhQDQ2N4AjMnqiAD1vCzbfwDtmA\/tmQ0Bi8rP2d0Ci8kCisn9yUYAi8j9ykYAiskAisrpiAAAjcrP2N39ykfqiAC+w8\/m6+8Bi8n1vCxFMyzWfAD19vaZqK7mpAD\/\/\/\/R2t\/z9ffx9PWptLynsrrpqAb7xT\/8yEVINi7f5unT3OCrtb7jhADonyD7\/Pz3+frq7vD8yEL5wzrsrhHaggTYfQDk6u7v8vTc4+fZ4eX3xUb4wTX3vzDzuSjrqgvcgAD28+qstr\/vsxzwoBjtsBbYfwHfgQDs8PL37tf9zEv4tzLyuCXxtiG6wMuCdW95bGbnuEP5wT3ukwrrjATqhwDA0dspmcy1vMf535yUioZwYlxlVU9nUjpNOzLwry70qyXx8PDs6+v28eVdTkfjtUOhfz3tqSju7ezj6Ovp6OfW3uPS29\/g3t3b2dj37NG0raqpoZ6akY6MgXz713r70WP9zFB9Yz9TQjzztjRdSDThkBHokxD08\/OiyNhmsdINkMoMjsrLx8XIw8Gjr7ehr7a7tbPwwk6tiT72vTrkmBndiQvK09mEvNZ3t9VJptBIptChus69yM06ncwdk8rPy8mzwMWrt76stb7Ev7335rrBu7n45rbIvKqup6Snn5uzpZP80WH80F9yZV+FblLZrELXq0HPpEDNokCOcD7qoyTpoyLvmhPfjA6ix9lnsdPNycfbhgl8ohvrAAAAYXRSTlMA\/jufBerhxsED8lM3MCQZ8NG8h3ZbDPXk4uLMvbeej4Z6endrSTUPCvHt6efKxsSdX1RSFhAK9e7t7OrY07uysa6em5qTi3BpYV5WSDIuLSr2693T07+fjYV7eXhtaUcdtQGAVwAACAdJREFUeNrs1L9ugkAcwHEOuJBAUoJ\/FhIX4qCjSVdXN02aPkCT+0231+XYYGZoYHCjMuvmMxh4geqbNHFoikCiaUKid1gXPy\/w\/XHc\/aSHBx6mPHKUlmbZeIjQENuW1lKckWxK\/0CVnZ4ONfSeI6vSDanGKV4\/hHGrGZ4mGC6CJ09S80wFrqCYTR9+R4er6B210dMfw9XGs+b6MgYOeNRUv\/sCXKJ2M\/03BHySsNNEfzYEXszvivefbeCW+L74RlBAQEBfhR8AiA1ABX+CaokOYIstJANEIEqpb0giNBAR0Zwm0p+CCEaPkumdngCKin4AisAVxMCN+bTAAN\/hDSIW0FIAALLEq82Zj3x61oe2xMvi+va8XgkjOLJ4+wOEWMQQXCZhLKriVd6Nl+VQA94rUB2nt0\/TLMuWSwTJnyggxFhRLtMn3vc7IZ+Q478E\/TKSufuzzwq9Shj6tM7e3c5J7gMKfbEtsCYkXrmpRy8SHnabmFTWUFDE9vCClOLtxt0dvNryT7pzV19zcmYBBd5t\/MuK2bs0EoRhfJurFAXxEEHQThDE\/rCxEMH67h+YZpfhul23uSJJl2xEkhQJkSTGJt8xJioBY2LUaMBGwY8\/wMKv8\/vrtDi42bx77mwUYWf9dcm+7zPPzM48Q6LF0AwyMDFzuJXJLP55\/gU8Ly5mMluHEnqHGVD4wpiD0D2LLDALGmxXchs0vyALvIBGm5UgziILZK2cwxZ9D7JA78IWtt8j0CwhC0ig8dVCDkWRjs3OB6enp4Nu5R1XkuJuPOTtNqQTtZBEnY1erza24nGIP3VEjw3R1jyGhw6PAo+1LOxkvoxhC0zwDlV20uHz+HyOSRjLjSjc6jdQ4dEqHPwEbALmC3m0kQKqiij63HZ6vq6gT+QRBS\/6gi56Texunyiq3htJMMp8FcAb0AZ3Fu7uI070Ic7I\/V0B4hjavOyXwYjhEBYWUrJAkFMLBfQ+dE3EcBBHOBY6qDPgfJKFfHhTAGog30SkJgCb4bwgPzmpc9DBfBlmNe16On50WlmVBZW0kH5Eb3hMy8n\/Dk+P4um65jLLbOCH1xuVYP6pxDJe\/o1xCPTDN\/IDauJBvqngpaS2BqQ8kYI1kKJe73fOPP1DPM8rIH4QnsN4dRXjhACUqvX9ps1Xr5Z0hwKpnQsfwCOFCA32c2bp4VVA4jaHMQ7LoYSgsbcdIuo0C6HtvfzuXloAwqRh6VY7oio9nElaed3AxDkmwOhAGedqyEAth8tUQQITzikDfCtnjl7awDwmhCj9Y4wvDYHgvMT4mCoIYcIUbaCXM8cQtEGkxDChosvLRbLAhk2wv4RxUdYrKpgQow0Mcebopg0E\/EQul3+Vj5OPK8jACvkq\/lqQVzeNPwDrB0rdnDkGoE2L93X1JezIApCcI8u7jgysT5F9nxQA+S8pn9cqbKA0wJnjG7RJCLjyqw5ggGqRzP8aNXFN1qBYBYM76vyvECCxGRg2GkCB2DyZ4u5FvFwi048hI1BBFqFUjl\/sbpPpxwLIaGCYKQZ4+hJeO\/FPkcH9Z2sg\/tbC2hlUnNAVdp4pCHp1AzQbG+gtH1fY2Y7hOLS5kGVcoDTOmaP90wwooNTOmWSQV1E+y8AgZ5YxLYstAzpj5q\/jLi0KLQJB2NXPmaaPDgJ2IAb6WP6i+sd7\/bsmDEQBHH+jg139sSkuhTqIij86iFQHB0HoWLq8wG3WCA6XoSpCNJRkcMmgf0gw\/12TSBsrvNPk6H324x7c+w5XPHdI+NpvHGexCD4DC8fZ7KltPVdYfIQUsnlRBofpHwdRhfkspDJ+FWSw3kwvbNaCAZ7HkFKz1B9qJNv5ud6xNdKwX2qCjI5wwezj0RYuagdk9TQpPZD1rkl5A1lZTUqy\/R918aZZzPeNiO\/PYnhTdwSUdngBZyt3O9f1ZeQz8pHK+ewyouvzrbtiPBywDZQCBmbWbse5ZzK2Crmuuw3MY7rAPLYNBIdXIcZMj\/PdzpphoACUDCqRAcoAlRgApYJKVIDSQCUaQJmgEhOgtFCJFgg6VICoUF2HGaDVUIEaEFR1WAFaHRVoAO0BFXgAWg4VaIFAFf9dFQiqOsyAyAsmYFjcZMzkloEJ1ECkjHczOPvFE4xQhpB8hyd2yTzhveoQkO\/QYFcMTFKhfIceu+LhnXIg9JTwAWInmQpj3+3VPUvDQBgH8JsC3boXBAe7CG5ODoKbuDj5gig+cPkvgYBZtHupYz9AxiafxlpoN1\/6RttPoYOX447YNolnw239kYNkSvI8z\/\/ugIw8u2uey6VQuyQjLXdNi4ycsGK7tj9glxU7s92CMyaUz6HvrvE3SGGJHD66Kx43SGGZHPpNd0nTsAD7TCqfQ3pqLr3\/icwcsD8cHpEhv\/UrAT4ZOrpnhc6dLhnz9XHsk7GuUy\/8fwdDsmoI55Dl2wEisioCjlmuPQCvZFUPwCnLUalB6JBFHQhOJb8AwgtZ9AUUlKCGxDtZ9I6CEtQhfZNFXUh7LMsVpE+y6BPSTuYIOhAs5zCCVK3kdcB2Dl+R34MbCJZz2IFyzdYdA7CdwxcoFxkjUIXyQYm5pwVvtKG3wNPmlPgAcofgHNok6cHYS81oQzMvNU46MIFWZ6vuoI04D+OGl+q3hUVDetCCQFxa8qQ1pEVb6HupRhxyPoJ2m3EQKj0updUbhPx\/glistrgJB2kfudQD8naCGpQpLyn2+jz0BjzLFEqNrapCiXhZcShXlghKlW1tKT9qgLvzz43R\/wAAAABJRU5ErkJggg==\"\r\nalt=\"man with a computer\"&gt;\r\n<\/pre>\n<p>The above code displays a PNG image of the man with a laptop emoji\u2014you can check it in your browser.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-html-documents-on-the-fly\/base64-url-example.jpg\" width=\"600\" height=\"174\" alt=\"Data URL example with Base64 images\"><\/figure>\n<p>Similar to how this is done, <strong>data URLs can also serve HTML documents<\/strong>:<\/p>\n<pre>&lt;iframe src='data:text\/html,&lt;strong&gt;Hello World!&lt;\/strong&gt;'&gt;&lt;\/iframe&gt;<\/pre>\n<p>The iframe <strong>renders the HTML document<\/strong> that was added using the data URL containing the <code>text\/html<\/code> media type & followed by the HTML code.<\/p>\n<p>You can edit the Codepen demo below by adding extra HTML to it if you want to see how the technique works.<\/p>\n<p><iframe height=\"265\" scrolling=\"no\" title=\"Create an HTML Document with Data URL\" src=\"https:\/\/codepen.io\/\/hkdc\/embed\/aEBGjJ\/?height=265&theme-id=0&default-tab=html,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/aEBGjJ\/\" rel=\"nofollow\">Create an HTML Document with Data URL<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<h2>2. DOMImplementation interface<\/h2>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMImplementation\" target=\"_blank\" rel=\"noopener\"><code>DOMImplementation<\/code><\/a> is an interface that can <strong>create brand new documents<\/strong> using either its <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMImplementation\/createDocument\" target=\"_blank\" rel=\"noopener\"><code>createDocument()<\/code><\/a> (for XML) or <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMImplementation\/createHTMLDocument\" target=\"_blank\" rel=\"noopener\"><code>createHTMLDocument()<\/code><\/a> method\u2014whichever you need. The interface is accessed using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/implementation\" target=\"_blank\" rel=\"noopener\"><code>document.implementation<\/code><\/a> object.<\/p>\n<p>The <code>createHTMLDocument()<\/code> method <strong>takes one optional parameter<\/strong> which is the <strong>title of the new document<\/strong>.<\/p>\n<p>You can <strong>add HTML to a newly created document<\/strong> the same way you usually do: by using methods such as <code>append()<\/code>, <code>appendChild()<\/code>, and other <a href=\"https:\/\/www.hongkiat.com\/blog\/dom-manipulation-javascript-methods\/\">DOM-related JavaScript methods<\/a>.<\/p>\n<pre>\r\n&lt;iframe src=\"\"&gt;&lt;\/iframe&gt;\r\n<\/pre>\n<pre>\r\nwindow.onload = () =&gt; {\r\n  var doc = document.implementation.createHTMLDocument();\r\n  doc.body.append('Hello World!');\r\n  var iframeDoc = document.querySelector('iframe').contentDocument;\r\n  iframeDoc.replaceChild(\r\n  doc.documentElement,\r\n  iframeDoc.documentElement\r\n  );\r\n}\r\n<\/pre>\n<p>In the code above, a <strong>new HTML document is created<\/strong> using the <code>createHTMLDocument()<\/code> method of the <code>DOMImplementation<\/code> interface and the <q>Hello World!<\/q> string is <strong>added to its body element<\/strong>.<\/p>\n<p>Then, to see how the newly created document looks when it\u2019s rendered, I replaced the document element of the iframe (<code>iframeDoc.documentElement<\/code>) with the document element of the new document (<code>doc.documentElement<\/code>) using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\/replaceChild\" target=\"_blank\" rel=\"noopener\"><code>replaceChild()<\/code><\/a> method. This way, you\u2019ll <strong>be able to see the <q>Hello World!<\/q> string<\/strong> from the document we created and added to the iframe.<\/p>\n<p><iframe height=\"265\" scrolling=\"no\" title=\"Create a New HTML Document with the DOMImplementation Interface\" src=\"https:\/\/codepen.io\/hkdc\/embed\/zpojMN\/?height=265&theme-id=0&default-tab=js,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/zpojMN\/\" rel=\"nofollow\">Create a New HTML Document with the DOMImplementation Interface<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<h2>3. DOMParser API<\/h2>\n<p>As its name suggests, the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMParser\" target=\"_blank\" rel=\"noopener\"><code>DOMParser<\/code><\/a> API <strong>parses HTML\/XML strings into DOM documents<\/strong>.<\/p>\n<p>A new <code>DOMParser<\/code> object instance <strong>can be created using its constructor<\/strong>, <code>DOMParser()<\/code>. The instance holds a method called <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMParser#Parsing_XML\" target=\"_blank\" rel=\"noopener\"><code>parseFromString()<\/code><\/a> that <strong>does the parsing after taking two arguments<\/strong>: the string to be parsed and the document type of the document to be created.<\/p>\n<pre>\r\n&lt;iframe src=\"\"&gt;&lt;\/iframe&gt;\r\n<\/pre>\n<pre>\r\nwindow.onload = () =&gt; {\r\n  var parser = new DOMParser();\r\n  var doc = parser.parseFromString('&lt;strong&gt;Hello World! &lt;\/strong&gt;', \"text\/html\");\r\n  doc.body.append('extra text');\r\n  var iframeDoc = document.querySelector('iframe').contentDocument;\r\n  iframeDoc.replaceChild(doc.documentElement, iframeDoc.documentElement);\r\n}\r\n<\/pre>\n<p>In the above code, a new <code>DOMParser<\/code> instance <strong>parses a HTML string to a DOM document<\/strong> using the <code>parseFromString()<\/code> method.<\/p>\n<p>Then, in the same way as in the previous code snippet, the document element of the newly created document <strong>replaces the document element of the iframe<\/strong>. As a result, the HTML code in the document we created becomes visible in the iframe.<\/p>\n<p><iframe height=\"265\" scrolling=\"no\" title=\"Create a New HTML Document with the DOMParser API\" src=\"https:\/\/codepen.io\/hkdc\/embed\/zpojeN\/?height=265&theme-id=0&default-tab=js,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/zpojeN\/\" rel=\"nofollow\">Create a New HTML Document with the DOMParser API<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/\" rel=\"noopener\">Understanding Document Object Model (DOM) in Details<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>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&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[506,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Three Ways to Create HTML Documents on the Fly - Hongkiat<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Three Ways to Create HTML Documents on the Fly\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-15T13:01:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:51:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/create-html-documents-on-the-fly\/base64-url-example.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Three Ways to Create HTML Documents on the Fly\",\"datePublished\":\"2018-01-15T13:01:59+00:00\",\"dateModified\":\"2025-04-03T18:51:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/\"},\"wordCount\":654,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-html-documents-on-the-fly\\\/base64-url-example.jpg\",\"keywords\":[\"HTML\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/\",\"name\":\"Three Ways to Create HTML Documents on the Fly - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-html-documents-on-the-fly\\\/base64-url-example.jpg\",\"datePublished\":\"2018-01-15T13:01:59+00:00\",\"dateModified\":\"2025-04-03T18:51:21+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-html-documents-on-the-fly\\\/base64-url-example.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-html-documents-on-the-fly\\\/base64-url-example.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-html-documents-on-the-fly\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Three Ways to Create HTML Documents on the Fly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Three Ways to Create HTML Documents on the Fly - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/","og_locale":"en_US","og_type":"article","og_title":"Three Ways to Create HTML Documents on the Fly","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-01-15T13:01:59+00:00","article_modified_time":"2025-04-03T18:51:21+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/create-html-documents-on-the-fly\/base64-url-example.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Three Ways to Create HTML Documents on the Fly","datePublished":"2018-01-15T13:01:59+00:00","dateModified":"2025-04-03T18:51:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/"},"wordCount":654,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-html-documents-on-the-fly\/base64-url-example.jpg","keywords":["HTML","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/","url":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/","name":"Three Ways to Create HTML Documents on the Fly - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-html-documents-on-the-fly\/base64-url-example.jpg","datePublished":"2018-01-15T13:01:59+00:00","dateModified":"2025-04-03T18:51:21+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/create-html-documents-on-the-fly\/base64-url-example.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-html-documents-on-the-fly\/base64-url-example.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/create-html-documents-on-the-fly\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Three Ways to Create HTML Documents on the Fly"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-baE","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=42944"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42944\/revisions"}],"predecessor-version":[{"id":73742,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42944\/revisions\/73742"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=42944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=42944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=42944"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=42944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}