Building a To-Do List

Instead of writing HTML by hand, JavaScript can create it. Type a task, press Add, and a new list item appears out of nowhere.

document.createElement('li')

1. 1The shell

   Add an input, an Add button, and an empty <ul>.

   <input id="task"><button id="add">Add</button>
   <ul id="list"></ul>

2. 2Create the item

   On click, create an <li> and set its text.

3. 3Add it to the page

   Append the new li to the list.

4. 4Clear the input

   Empty the input so the next task is easy to type.