How I created in-memory DOM?

In this post, I will show how you can create an in-memory DOM.

Introduction

Few weeks back, I had a task to create an online code editor for HTML, CSS, JS and show the output on the same screen.

Why I needed in-memory DOM?
I stored different codes in different variables and for showing the output on same screen, I had to create a virtual DOM and merge all the codes (HTML + CSS + JS) together and inject it into an iframe.

Code

The above code takes HTML, CSS and Javascript as string and then combines them together in HTML. It returns the merged code as a string then it is injected into an iframe.

Demo
You can see the working of the above code in this app.

Bro Code Editor