导航栏与侧边菜单无法同时加载相同后端返回链接如何解决

问题根源 #

同一个DOM元素不能同时存在于文档的两个位置。调用appendChild()方法插入已存在于DOM树中的元素时，浏览器不会复制该元素，而是直接将它从原有父节点剪切到新的父节点下。你先把链接插入导航栏，再插入侧边栏的操作，本质是把导航栏里的链接直接移到了侧边栏，所以导航栏看不到加载的链接。

修复方案 #

你可以通过克隆DOM节点的方式生成两份完全相同的链接，分别插入两个组件，修改后的JS代码如下：

const categories = categoriesData.items;

const list = document.getElementById("listAnchor");
const navbar = document.getElementById("navAnchor");

categories.forEach((element) => {
  // 创建导航栏用的链接
  const navLink = document.createElement("a");
  navLink.setAttribute("href", "//localhost:8888");
  navLink.textContent = element.name;
  navbar.appendChild(navLink);
  
  // 深拷贝一份完全相同的链接给侧边栏使用
  const sideLink = navLink.cloneNode(true);
  const listItem = document.createElement("li");
  list.appendChild(listItem).appendChild(sideLink);
});

其他优化建议 #

• 纯文本内容赋值优先用textContent代替innerHTML，可以避免XSS注入风险，性能也更好
• 不需要重新赋值的变量统一用const声明，代码可靠性更高
• 后续如果需要给这些动态生成的链接加统一样式或者交互，可以给它们加上相同的类名，批量操作更方便

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