HTML supplies the elements of a browser page. For an interactive application, the useful first question is: which elements can be written once, and which must change as the application runs? A TODO app can keep its heading, labeled input, Add button, and empty list in an HTML file. Its list items depend on the current to-dos, so JavaScript creates them later. section 2.2 section 2.2.2
Listing 2.1 The static HTML markup for the TODOs app (todos.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My TODOs</title>
<script type="module" src="todos.js"></script> #1
</head>
<body>
<h1>My TODOs</h1>
<div> #2
<label for="todo-input">New TODO</label>
<input type="text" id="todo-input" />
<button id="add-todo-btn" disabled>Add</button>
</div>
<ul id="todos-list"></ul> #3
</body>
</html>
The static page includes an empty <ul id="todos-list"> for JavaScript to fill. IDs also give JavaScript a way to find the input and button. section 2.2.2
The page loads todos.js with <script type="module" src="todos.js"></script> in its <head>. Browser ES modules are deferred by default: the HTML is parsed before this JavaScript executes, so the elements are available when the code starts. section 2.2.2
To turn the initial markup into a working view:
- Find the existing input, button, and list with document.getElementById(). section 2.2.3
- Render each to-do by creating a <li> and its child elements with document.createElement(), then append it to the list. section 2.2.3
- Attach event listeners for typing, clicking, and editing; add, remove, or replace list elements when the to-do array changes. section 2.2.3
One to-do, two HTML representations
A to-do in read mode appears as a list item containing its text and a Done button. In edit mode, its list item instead contains an input and Save and Cancel buttons. Switching modes replaces the existing list item; changing the array alone would not update what the user sees. section 2.2.3
HTML can reach the browser in different states. A single-page application may receive a mostly empty HTML file that loads JavaScript and CSS; JavaScript then creates the view through the Document API. With server-side rendering, the server sends already-rendered HTML. Hydration subsequently connects those elements to the application's virtual DOM and attaches event handlers so the page becomes interactive. section 1.3.2 section 1.3.3
