使用innerHTML+=添加待办项时，原有复选框勾选状态丢失问题求助

核心原因 #

你用innerHTML+=追加新待办项的操作，本质是把当前列表的所有HTML先转成字符串，拼上新的<li>代码后，再重新整个渲染列表的DOM。这时候原来已勾选的复选框会被完全销毁，新生成的复选框是按照你从对象里取的初始状态（未勾选）创建的，所以之前的勾选状态直接丢失了。

解决办法 #

别用innerHTML+=，改用原生DOM API创建元素并追加，这样不会触动已有的DOM节点，它们的状态会完整保留。举个简单例子：

原来的错误写法大概是这样：

// 假设todoList是你的<ul>元素，newTodo是新的待办对象
todoList.innerHTML += `
  <li>
    <input type="checkbox" ${newTodo.completed ? 'checked' : ''}>
    <span>${newTodo.text}</span>
    <span>${newTodo.createTime}</span>
  </li>
`;

改成这样：

// 创建新的li元素
const li = document.createElement('li');

// 创建复选框
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = newTodo.completed; // 直接设置初始状态

// 创建文本节点
const textSpan = document.createElement('span');
textSpan.textContent = newTodo.text;

const timeSpan = document.createElement('span');
timeSpan.textContent = newTodo.createTime;

// 把节点都加到li里
li.appendChild(checkbox);
li.appendChild(textSpan);
li.appendChild(timeSpan);

// 最后把li加到列表里，这一步不会影响已有的元素
todoList.appendChild(li);

这样每次添加新项时，只是在列表末尾插入新的DOM节点，原来的复选框和它们的勾选状态完全不受影响，自然就不会出现勾选被取消的问题了。

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