使用jQuery实现点击按钮将输入框内容添加到待办列表的相关问题

数据老陈

2026-10-8

jQuery待办列表新增功能实现

原有代码问题

重复创建2个<ul>元素，初始待办项渲染到了无后续操作的临时ul，逻辑不统一
按钮点击事件存在语法错误，未正确获取输入框值，也未同步更新待办数组与页面DOM
jQuery中获取input输入内容需用.val()方法，而非.text属性

修复后完整可运行代码

const body = $("body");
const header = $("<header>Todo List</header>");
// 统一的待办列表容器
const todoList = $("<ul></ul>");
const addTodoBtn = $("<button>新增待办</button>");
const inputBox = $("<input type='text' placeholder='请输入待办内容'>");
var toDos = ["wake up", "eat breakfast", "code"];

// 待办列表渲染函数
function renderTodos() {
  // 清空原有内容避免重复渲染
  todoList.empty();
  todoList.append(toDos.map(text => $("<li>", { text })));
}

// 新增待办逻辑
function addToList() {
  const inputContent = inputBox.val().trim();
  // 空内容不提交
  if (!inputContent) return;
  // 更新待办数组
  toDos.push(inputContent);
  // 同步渲染到页面
  renderTodos();
  // 提交后清空输入框
  inputBox.val('');
}

// 绑定按钮点击事件
addTodoBtn.on("click", addToList);

// 所有元素挂载到页面
body.append(header);
body.append(inputBox);
body.append(addTodoBtn);
body.append(todoList);

// 页面初始化渲染初始待办
renderTodos();