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 document. You’ll learn how in this chapter as well.
NOTE You can find all the listings in this chapter in the listings/ch04 directory of the book’s repository (http://mng.bz/6nxy). The code you write in this chapter is for the framework’s first version, which you’ll publish in chapter 6. Therefore, the code in this chapter can be checked out from the ch6 label (http://mng.bz/orgM): $ git switch --detach ch6.