EJS 单页应用中路由视图切换时 DOM 丢失的根源与修复方案

本文详解在基于 EJS + 原生 JavaScript 构建 SPA 时，因错误使用 appendChild/append(...childNodes) 导致视图容器 DOM 被移除而非克隆，进而引发重复路由后内容空白的问题，并提供简洁可靠的修复方法。

本文详解在基于 ejs + 原生 javascript 构建 spa 时，因错误使用 `appendchild`/`append(...childnodes)` 导致视图容器 dom 被移除而非克隆，进而引发重复路由后内容空白的问题，并提供简洁可靠的修复方法。

在使用 EJS 模板配合纯 JavaScript 实现单页应用（SPA）路由时，一个常见但隐蔽的陷阱是：视图容器元素本身被意外移除，而非其内容被安全复用。这直接导致用户首次访问某路由（如 #/search）时界面正常渲染，但一旦跳转至其他路由（如 #/create）再返回，目标视图区域（如 #layout-users）变为空白——表面看是“数据没加载”，实则根源在于 DOM 结构已被破坏。

问题核心出现在 router.showIn() 方法中这一行代码：

layout.append(...view.childNodes);

该写法看似合理：将 #view-users-search 的所有子节点“搬”到布局区。但 childNodes 是实时的 Live NodeList，且 ...view.childNodes 展开后调用 append() 会移动（move）而非复制（copy）节点。关键后果有二：

1. ✅ 子节点被移出原容器，插入 #layout-users → 首次显示正常；
2. ❌ 原容器 #view-users-search 变为空（无子节点），但其自身仍存在于 #views-users 中；
3. ⚠️ 当再次路由到 #/search 时，document.querySelector('#view-users-search') 虽能获取到该元素，但 view.childNodes 已为空数组 → layout.append(...[]) 不执行任何操作，#layout-users 保持空状态。

? 验证技巧：在浏览器控制台执行 document.querySelector('#view-users-search').childNodes.length，首次为非零值，返回后变为 0，即可确认此问题。

NexChatGPT

火爆全网的IDEA插件，支持IDEA全家桶

下载

✅ 正确解法：保留容器结构，追加整个元素

只需将问题代码替换为：

layout.append(view);

这样，#view-users-search 整个 DOM 元素（含其 ID、子结构及内联脚本）被完整移动至 #layout-users。由于 view 是一个独立的

showIn: viewSelector => {
    const layout = document.querySelector('#layout-users');
    const viewsContainer = document.querySelector('#views-users');
    const view = document.querySelector(viewSelector);

    // ✅ 步骤1：将当前 layout 中的内容“归还”到 viewsContainer（若存在）
    if (layout.firstChild) {
        viewsContainer.append(...layout.childNodes); // 移动所有子节点回隐藏区
    }

    // ✅ 步骤2：将目标 view 元素整体移入 layout（关键修复）
    layout.append(view);
}