TodoList是类似备忘录的一个功能可以记录准备要做的事情对于做完的事情可以进行删除。在已有静态UI的基础上完成todolistd案例的添加功能。

1. 首先需要在HTML文件中添加一个输入框和一个按钮，用于用户输入待办事项并添加到列表中。

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="添加待办事项" id="newTaskInput">
  <button class="btn btn-outline-secondary" type="button" id="addTaskBtn">添加</button>
</div>

2. 在JavaScript文件中，获取输入框和按钮的元素，并为按钮添加点击事件。

const newTaskInput = document.getElementById('newTaskInput');
const addTaskBtn = document.getElementById('addTaskBtn');

addTaskBtn.addEventListener('click', addTask);

3. 编写添加待办事项的函数addTask，该函数首先获取输入框中的值，然后创建一个新的li元素，并将输入框中的值添加到li元素中，最后将li元素添加到待办事项列表中。

function addTask() {
  const newTaskText = newTaskInput.value.trim();

  if (newTaskText !== '') {
    const newTask = document.createElement('li');
    newTask.textContent = newTaskText;
    taskList.appendChild(newTask);
    newTaskInput.value = '';
  }
}

4. 运行代码，可以看到现在已经可以通过输入框和按钮添加待办事项了。