How I created in-memory DOM?

Img Credits

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.
Web Code Editor

Edit 1.
Changed the title from VDOM to in-memory DOM, as I mistook it for a VDOM.
Thanks @lukeshiru for the suggestion.

Img Credits

1. Crello
2. Morioh

Comments

[Abhishek Raj]

Thanks for pointing out the bug. Will sort it out soon.

[Abhishek Raj]

Got it, will change the title.
Thanks for sharing.

[Abhishek Raj]

Please do read this article.
reactkungfu.com/2015/10/the-differ...