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

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

` 时动态生成 `

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

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

  1. 变量名拼写错误：topiclUl（多了一个 l）导致 appendChild 失败，实际未向 ul 添加任何
  2. ，但因错误未抛出，掩盖了问题；
  3. 循环越界：i 被插入；
  4. 清理逻辑不完整：onmouseout 仅移除第一个
  5. ，且未移除
     本身，导致多次悬停后
     叠加，每次再向旧
     追加新
     • ，形成无限增长。

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

  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);
      }
  });

  ✅ 关键优化说明：

  

  javascript-pro

  专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

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

    ⚠️ 注意事项：

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

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