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.
Top comments (3)
Thanks for pointing out the bug. Will sort it out soon.
Got it, will change the title.
Thanks for sharing.
Please do read this article.
reactkungfu.com/2015/10/the-differ...