本文将为你介绍如何使用JavaScript创建一个简单的待办事项列表。我们将通过一系列步骤来构建这个列表，并添加一些基本的交互功能。

1. 创建基本HTML结构

首先，我们需要一个HTML文件来构建待办事项列表的基础结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
</head>
<body>
    <h1>我的待办事项</h1>
    <input type="text" id="todoInput" placeholder="添加待办事项...">
    <button onclick="addTodo()">添加</button>
    <ul id="todoList"></ul>
</body>
</html>

在上面的代码中，我们创建了一个文本输入框和一个按钮，用于添加待办事项，并使用一个无序列表来展示所有待办事项。

2. 编写JavaScript代码

接下来，我们需要编写JavaScript代码来处理添加待办事项的功能。

function addTodo() {
    var todoInput = document.getElementById('todoInput');
    var todoList = document.getElementById('todoList');
    var todoText = todoInput.value;

    if (todoText.trim() !== '') {
        var todoItem = document.createElement('li');
        todoItem.textContent = todoText;
        todoList.appendChild(todoItem);
        todoInput.value = '';
    }
}

在上面的代码中，我们定义了一个名为addTodo的函数，当用户点击“添加”按钮时，它会从输入框中读取待办事项文本，并创建一个新的列表项添加到待办事项列表中。

3. 完善待办事项列表

为了使待办事项列表更完整，我们可以添加一些额外的功能，例如删除待办事项。

function deleteTodo(event) {
    var todoItem = event.target.parentNode;
    todoItem.parentNode.removeChild(todoItem);
}

在上面的代码中，我们定义了一个名为deleteTodo的函数，它会在用户点击待办事项旁边的删除按钮时被调用。这个函数会删除点击的待办事项。

4. 额外功能：标记待办事项为完成

我们还可以为待办事项添加一个标记为完成的按钮。

function toggleComplete(event) {
    var todoItem = event.target.parentNode;
    todoItem.classList.toggle('completed');
}

在上面的代码中，我们定义了一个名为toggleComplete的函数，它会在用户点击待办事项旁边的标记为完成的按钮时被调用。这个函数会切换待办事项的完成状态。

5. 完整的示例代码

以下是一个完整的示例代码，包括HTML、CSS和JavaScript。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
    <style>
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>我的待办事项</h1>
    <input type="text" id="todoInput" placeholder="添加待办事项...">
    <button onclick="addTodo()">添加</button>
    <ul id="todoList"></ul>

    <script>
        function addTodo() {
            var todoInput = document.getElementById('todoInput');
            var todoList = document.getElementById('todoList');
            var todoText = todoInput.value;

            if (todoText.trim() !== '') {
                var todoItem = document.createElement('li');
                todoItem.textContent = todoText;
                todoItem.innerHTML += '<button onclick="deleteTodo(event)">删除</button>';
                todoItem.innerHTML += '<button onclick="toggleComplete(event)">完成</button>';
                todoList.appendChild(todoItem);
                todoInput.value = '';
            }
        }

        function deleteTodo(event) {
            var todoItem = event.target.parentNode;
            todoItem.parentNode.removeChild(todoItem);
        }

        function toggleComplete(event) {
            var todoItem = event.target.parentNode;
            todoItem.classList.toggle('completed');
        }
    </script>
</body>
</html>

通过上面的代码，我们创建了一个功能完整的待办事项列表，你可以根据自己的需求进行扩展和修改。

更多关于JavaScript的教程，请访问我们的JavaScript教程页面。