Build a Frontend Web Framework (From Scratch)

4 Mounting and destroying the virtual DOM

This chapter covers

• Creating HTML nodes from virtual DOM nodes
• Inserting HTML nodes into the browser’s document
• Removing HTML nodes from the browser’s document

In chapter 3, you learned what the virtual Document Object Model (DOM) is and how to create it. You implemented the h(), hString(), and hFragment() functions to create virtual nodes of type element, text, and fragment, respectively. Now it’s time to learn how to create the real DOM nodes from the virtual DOM nodes and insert them into the browser’s document. You achieve this task by using the Document API, as you’ll see in this chapter.

When the view of your application is no longer needed, you want to remove the HTML nodes from the browser’s ...