为什么JavaScript点击函数中包裹ul标签后循环结果不会重复追加

• 包裹<ul>标签时不会重复追加的原因：
  1. 你在每次点击触发的逻辑开头，执行了document.getElementById("selected_check").innerHTML = "<ul>";，这是覆盖赋值操作，会直接清空该元素之前的所有内容，再写入新内容，从根源上避免了内容累加。
  2. 浏览器对不完整的HTML标签有自动补全机制：当你单独赋值<ul>到innerHTML时，浏览器会识别到标签未闭合，自动补全为<ul></ul>存入DOM。后续循环拼接的<li>实际是加在已闭合的<ul>标签之后，最后追加的</ul>会被判定为无效冗余标签直接丢弃，所以每次点击都是重新生成当前选中项的内容，不会出现重复。
• 删除<ul>相关代码后重复追加的原因：
  去掉开头的覆盖赋值语句后，所有内容操作都是通过+=拼接实现，没有清空原有内容的步骤，每次点击都会把当前选中的<li>拼在已有内容后面，自然会出现重复追加的效果。

不要分多次修改innerHTML，先拼接完整的HTML字符串后再统一操作，避免浏览器自动补全导致的异常，示例代码如下：

document.getElementById("show_check").onclick = function() {
    const checkList = document.getElementsByName("interest");
    let listHtml = "<ul>";
    for(let i = 0; i < checkList.length; i++) {
        if(checkList[i].checked) {
            listHtml += `<li>${checkList[i].value}</li>`;
        }
    }
    listHtml += "</ul>";
    document.getElementById("selected_check").innerHTML += listHtml;
}

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