A single-page application can start with an almost empty HTML body. Its JavaScript then uses the browser’s Document API, accessed through `document`, to create the visible elements. Creating that initial view is called mounting the application. section 1.3.2
To build a view with vanilla JavaScript:
- Find existing elements with `document.getElementById()`, such as the input, Add button, and list that hold a to-do application. section 2.2.3
- Create elements with `document.createElement()`, set their text or values, and attach event listeners for interactions. section 2.2.3
- Use element methods such as `append()`, `replaceChild()`, and `remove()` to keep the displayed list aligned with application state. section 2.2.3
Render a to-do
Given `const todosList = document.getElementById('todos-list')`, create a list item with `const li = document.createElement('li')`, set `li.textContent = 'Walk the dog'`, then call `todosList.append(li)`. The string becomes a visible list item; later edits require another DOM update. section 2.2.3
Doing every update by hand works, but each state-changing event needs corresponding DOM code. That code can become verbose and mixed with application logic. A frontend framework still uses the Document API; it takes responsibility for creating and updating the view, potentially patching only the parts that changed. section 2.3 section 8.0
