Guide: How to Create HTML Documents with Fly
Create HTML documents on the fly, with or without JavaScript, is sometimes required. Whether the goal is to display a confirmation page or an iframe with a whole page, if the document is simple enough it can be easily composed and served with data URLs or JavaScript But how do you do that? I’m sure you already know how to Add HTML to a document with JavaScript, but on create a whole HTML documentYou may be interested in some of the methods I’ll be showing below, the first of which doesn’t even require JavaScript! I will show all newly created documents in iframes so you could see them displayed. However, you can use the documents as you see fit. For example, they can be stored in a database or sent via web services appear elsewhere.
1. Data URLs
Data URLs provide you a simple and effective method to serve documents on a web pageIf you are not familiar with them, read our previous article on how they work. Basically, data URLs start with the data: URL schemeIt is followed by the content to be served, for which you optionally have the media type and the encoding of the content You may have seen images served this way, true base64 characters are given as the content of the data URL, according to a media type.
The above code displays a PNG image of the man with a laptop emoji: you can check it in your browser. Just like how this is done, data URLs can also provide HTML documents pen Create HTML document with data URL by Compsmag (@hkdc) on CodePen.
2. DOMImplementation interface
DOMImplementation is an interface that can create brand new documents using the createDocument () method (for XML) or the createHTMLDocument () method – whatever you need. The interface is accessible through the document.implementation object. The createHTMLDocument () method takes an optional parameter which is the title of the new document You can Add HTML to a newly created document in the same way as you usually do: by using methods like append (), appendChild () and other DOM related JavaScript methods.
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 above code, a new HTML document is created using the createHTMLDocument () method of the DOMImplementation interface and the Hello World! string added to his body element Then to see what the newly created document looks like when displayed, 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 will the Hello World! wire of the document we created and added to the iframe. See the pen Create a new HTML document with the DOMImplementation interface by Compsmag (@hkdc) on CodePen.
3. DOMParser API
As the name suggests is the DOMParser API parses HTML / XML strings in DOM documents A new DOMParser object instance can be created using the constructor, DOMParser (). The instance contains a method called parseFromString () that does parse after taking two arguments: The string to parse and the document type of the document to be created.
window.onload = () => {var parser = new DOMParser (); var doc = parser.parseFromString (‘ Hello World! ‘, “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 an 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 iframeAs a result, the HTML code in the document we created becomes visible in the iframe. See the Pen Create a new HTML document with the DOMParser API by Compsmag (@hkdc) on CodePen.
How to Create HTML Documents with Fly: benefits
Faq
Final note
I hope you like the guide How to Create HTML Documents with Fly. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Create HTML Documents with Fly, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Create HTML Documents with Fly”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Create HTML Documents with Fly, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
