innerHTML赋值导致此前的复选框选中状态设置逻辑失效是什么原因

核心原理 #

innerHTML += 操作本质上不是在现有DOM结构后追加内容，而是执行以下三步：

1. 将当前元素内所有已挂载的DOM节点序列化为HTML纯字符串
2. 将该字符串和你追加的<br>拼接为新的完整HTML字符串
3. 清空当前元素内所有原有DOM节点，再把新的HTML字符串解析为DOM节点挂载进去

你之前通过checkbox.checked = true设置的是内存中DOM对象的运行时属性，这个属性不会同步到input元素的HTML静态属性（也就是<input>标签上的checked属性）。在执行innerHTML += '<br>'的序列化步骤时，原有checkbox节点的运行时选中状态不会被写入HTML字符串，重新解析生成的新checkbox自然就没有选中状态，你之前修改的旧checkbox节点已经被销毁替换了，自然设置不生效。

解决方案 #

推荐以下两种最优解法：

• 改用DOM节点追加的方式添加br，避免触发原有DOM的重解析：

// 把问题行替换为这行即可
div.appendChild(document.createElement('br'))

• 如果一定要操作innerHTML修改内容，可以在设置选中状态时同时修改静态HTML属性，保证序列化时状态可以被保留：

if (data === true) {
    checkbox.checked = true
    checkbox.setAttribute('checked', 'checked') // 新增这行
}

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