Dynamic List

Create elements, then append, prepend, or remove them.

Practice tasks

New task

No tasks yet.

Important HTML

JavaScript fills the empty list. Append adds at the end; prepend adds at the start.

<input id="task-input" type="text" name="task" placeholder="Enter a task">
<button id="add-last" type="button">Add last (append)</button>
<button id="add-first" type="button">Add first (prepend)</button>
<button id="clear-list" type="button">Clear list</button>
<p id="list-summary">No tasks yet.</p>
<ul id="task-list"></ul>

Important JavaScript

Build off the page, insert with append or prepend, then remove when done.

const item = document.createElement("li");
item.textContent = "Practice drills";
taskList.append(item);   // last child
taskList.prepend(item);  // first child
item.remove();