鼠标悬停Div时数组转Li无限创建且无法删除，求代码问题排查

你遇到的两个问题（鼠标悬停无限创建li、移出后无法删除），是代码里几个细节错误导致的，下面逐个分析并给出修复方案：

代码中的问题点 #

• mouseover重复触发导致无限创建：onmouseover事件会在鼠标在topics-div内部移动时反复触发，每次触发都会执行循环创建新的li，而且没有做"是否已创建列表"的判断，导致li越积越多。
• 循环边界写错：i <= stringsArray.length会让循环多跑一次，数组索引是从0到length-1，最后一次循环会取到undefined，生成空内容的li。
• 变量名拼写错误：topiclUl是笔误，正确应该是topicUl，这个错误会导致li根本加不到ul里（控制台会报找不到变量的错误）。
• mouseout删除不彻底：只删除第一个li，剩下的li还留在ul里，而且ul元素本身也没被移除，看起来就像没删干净。

修正后的完整代码 #

HTML #

<div id="topics-div">Topics</div>

JavaScript #

let stringsArray = [
    "Topic 1",
    "Topic 2",
    "Topic 3",
    "Topic 4",
    "Topic 5"
]

let topicsDiv = document.getElementById("topics-div");
let topicUl = document.createElement("ul");

topicsDiv.onmouseover = function(){
    // 先判断ul是否已经在div里，避免重复创建li
    if (!topicsDiv.contains(topicUl)) {
        topicsDiv.append(topicUl);
        // 修正循环边界，避免数组越界
        for(let i = 0; i < stringsArray.length; i++){
            let liElement = document.createElement("li");
            liElement.textContent = stringsArray[i];
            topicUl.appendChild(liElement);
        }
    }
}

topicsDiv.onmouseout = function(){
    // 直接移除整个ul，一次性清空所有li
    if (topicsDiv.contains(topicUl)) {
        topicsDiv.removeChild(topicUl);
        // 清空ul内部的内容，确保下次悬停时生成全新的列表
        topicUl.innerHTML = "";
    }
}

修复说明 #

1. 给mouseover事件加了判断：只有当ul不在div中时，才执行添加列表的逻辑，避免重复创建li。
2. 修正了循环条件：把<=改成<，避免数组越界产生空li。
3. 修正了变量名拼写错误，确保li能正确添加到ul中。
4. mouseout事件改为直接移除整个ul，同时清空ul的内容，这样下次悬停时会重新生成干净的列表，彻底解决删除不彻底的问题。

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