本文详解如何通过 JavaScript 在用户悬停 <div> 时动态生成 <ul> 及其子 <li> 元素，并在鼠标离开时彻底清理 DOM，避免重复追加和残留节点问题。

本文详解如何通过 javascript 在用户悬停 `

` 时动态生成 `

` 及其子 `
• ` 元素，并在鼠标离开时彻底清理 dom，避免重复追加和残留节点问题。

  在 Web 开发中，实现“悬停显示列表、离开即销毁”的交互效果很常见，但若 DOM 操作逻辑不当，极易引发无限创建、内存泄漏或节点残留等问题。原代码存在三个关键缺陷：

  1. 变量名拼写错误：topiclUl（多了一个 l）导致 appendChild 失败，实际未向 ul 添加任何 <li>，但因错误未抛出，掩盖了问题；
  2. 循环越界：i <= stringsArray.length 会使循环执行 6 次（索引 0–5），而数组长度为 5，索引最大为 4，stringsArray[5] 为 undefined，导致空 <li> 被插入；
  3. 清理逻辑不完整：onmouseout 仅移除第一个 <li>，且未移除 <ul> 本身，导致多次悬停后 <ul> 叠加，每次再向旧 <ul> 追加新 <li>，形成无限增长。

  以下是修复后的专业实现方案：

  const stringsArray = [
      "Topic 1",
      "Topic 2",
      "Topic 3",
      "Topic 4",
      "Topic 5"
  ];
  
  const topicsDiv = document.getElementById("topics-div");
  const topicUl = document.createElement("ul");
  
  // 悬停时：清空旧 ul（如有）、重新填充并挂载
  topicsDiv.addEventListener("mouseenter", () => {
      // 确保 ul 仅存在一个实例 —— 先移除已有 ul
      const existingUl = topicsDiv.querySelector("ul");
      if (existingUl) {
          topicsDiv.removeChild(existingUl);
      }
  
      // 重建 ul 并填充 li
      topicUl.innerHTML = ""; // 清空可能残留内容（防御性处理）
      stringsArray.forEach(text => {
          const li = document.createElement("li");
          li.textContent = text;
          topicUl.appendChild(li);
      });
  
      topicsDiv.appendChild(topicUl);
  });
  
  // 离开时：直接移除整个 ul（无需逐个删 li）
  topicsDiv.addEventListener("mouseleave", () => {
      if (topicUl.parentNode === topicsDiv) {
          topicsDiv.removeChild(topicUl);
      }
  });

  ✅ 关键优化说明：

  

  PigX UI 前端开发

  PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

  下载
  • 使用 addEventListener 替代 onmouseover/onmouseout，语义更清晰且便于维护；
  • 优先采用 mouseenter/mouseleave（而非 mouseover/mouseout），避免子元素触发冒泡导致的误触发；
  • 每次悬停前主动检查并移除已有 <ul>，从根源杜绝重复挂载；
  • 利用 forEach 替代传统 for 循环，语义更直观、无越界风险；
  • mouseleave 中仅需移除 <ul> 节点本身——因其所有 <li> 是其子节点，自然一并销毁，高效且安全。

  ⚠️ 注意事项：

  • 若需支持 IE11，请将 forEach 改为兼容写法（如 for (let i = 0; i < stringsArray.length; i++)）；
  • 如列表内容需频繁更新，建议将 <ul> 创建逻辑封装为函数，提升可复用性；
  • 生产环境推荐使用现代框架（如 React/Vue）管理动态列表，避免手动 DOM 操作复杂度。

  该方案确保每次悬停仅渲染一份干净列表，离开即完全释放，兼顾性能、可读性与健壮性。