Javascript 中的待办事项列表追加 appendchild 输入值

在 Javascript 中，待办事项列表是一个常见的需求。在这样的列表中，用户可以添加、编辑、完成或删除待办事项，通常有一个文本输入框和一个列表展示区域。在这篇文章中，我们将讨论如何使用 appendChild 方法将用户在输入框中输入的待办事项动态地追加到列表中。

添加 HTML 元素

首先，我们需要添加一个用于显示待办事项的列表。在 HTML 文件中添加以下代码：

<ul id="todo-list"></ul>

这将创建一个具有 ID 为 todo-list 的 ul 元素。我们将使用此元素作为待办事项列表的容器。接下来，我们需要添加一个文本输入框，使用户可以输入待办事项。在 HTML 文件中添加以下代码：

<input id="todo-input" type="text" placeholder="Add a to-do...">

这将创建一个具有 ID 为 todo-input 的文本输入框，并为其设置了一个占位符。

添加按钮

我们还需要为输入框添加一个按钮，使用户能够将待办事项添加到列表中。在 HTML 文件中添加以下代码：

<button id="add-button">Add</button>

这将创建一个具有 ID 为 add-button 的按钮，并为其设置文本内容为 “Add”。

追加待办事项

现在，我们已经创建了待办事项列表的容器、输入框和添加按钮，接下来我们将使用 Javascript 向列表中添加待办事项。在 Javascript 文件中，我们需要获取输入框和按钮的引用，并为按钮添加一个点击事件监听器。在 Javascript 文件中添加以下代码：

const inputBox = document.querySelector("#todo-input");
const addButton = document.querySelector("#add-button");

addButton.addEventListener("click", function() {
  const todoList = document.querySelector("#todo-list");
  const newTodo = document.createElement("li");
  newTodo.innerText = inputBox.value;
  todoList.appendChild(newTodo);
  inputBox.value = "";
});

此代码将使用 querySelector 方法获取输入框和按钮的引用，并将一个点击事件监听器添加到按钮上。每当用户点击按钮时，该事件监听器将执行以下操作：

• 获取待办事项列表的引用并保存到变量 todoList 中。
• 创建一个新的 li 元素，并将其保存到变量 newTodo 中。
• 将输入框中的值设置为新的待办事项。
• 将新待办事项 li 元素追加到列表中。
• 清空输入框。

现在，当用户在输入框中输入待办事项并点击按钮时，该待办事项将动态地追加到待办事项列表中。

总结

在 Javascript 中使用 appendChild 方法将用户输入的待办事项动态地追加到待办事项列表中是一项常见的任务。通过使用 querySelector 方法获取 HTML 元素的引用，并为按钮添加一个点击事件监听器，在 li 元素中附加输入框中的文本并将其追加到待办事项列表中，我们可以实现此功能。