解决待办列表添加任务时输入框文本被清空的问题

问题根源 #

你用innerHTML +=添加新任务时，浏览器会重新渲染整个taskList容器内的所有元素——原来的输入框会被销毁后重建，里面已填写的文本自然就丢失了。这个问题完全不需要数据库就能解决，纯前端操作就能搞定。

两种解决办法 #

1. 推荐：用原生DOM方法创建并添加元素（最稳妥）

放弃innerHTML +=的拼接方式，直接用DOM API创建新的任务输入框元素，再追加到taskList里。这样只会新增元素，不会触动已有的输入框，内容自然保留。

示例代码：

function addTask() {
  // 创建新的输入框元素
  const newTaskInput = document.createElement('input');
  newTaskInput.type = 'text';
  newTaskInput.className = 'your-task-class'; // 替换成你需要的类名
  newTaskInput.placeholder = '输入新任务'; // 替换成你要的占位文本

  // 追加到任务列表容器，不影响原有元素
  document.getElementById('taskList').appendChild(newTaskInput);
}

2. 临时方案：先保存已有内容再恢复（不推荐）

如果暂时不想改DOM创建的逻辑，也可以先把所有已有输入框的内容存下来，用innerHTML +=拼接完新元素后，再把内容重新填充回去。但这种方法容易出错，维护起来麻烦，只适合临时过渡。

示例代码：

function addTask() {
  const taskList = document.getElementById('taskList');
  // 先保存所有已有输入框的内容
  const inputs = taskList.querySelectorAll('input');
  const values = Array.from(inputs).map(input => input.value);

  // 拼接新元素
  taskList.innerHTML += `<input type="text" class="your-task-class" placeholder="输入新任务">`;

  // 把保存的内容填回原来的输入框
  const newInputs = taskList.querySelectorAll('input');
  values.forEach((val, index) => {
    newInputs[index].value = val;
  });
}

关于数据库的疑问 #

只有当你需要刷新页面后仍保留任务内容，或者需要多设备同步时，才需要用到本地存储（比如localStorage，前端就能实现）或后端数据库。你当前的需求只是点击按钮时保留已输入的文本，完全不需要数据库。

内容的提问来源于stack exchange，提问作者Akash Patel