如何使用document fragments创建带超链接的同页锚点动态列表？

云上老周

2026-9-29

实现锚点跳转动态菜单的方案

现有代码核心问题

混淆原生JavaScript和jQuery语法，API调用逻辑完全错误
length.header为无效写法，没有正确获取待处理的锚点元素集合
未正确读取目标锚点标签的文本内容赋值给菜单超链接
未使用DocumentFragment优化DOM操作，频繁触发页面重绘

正确实现代码

原生JavaScript版本（无需依赖jQuery）

// 获取菜单容器
const container = document.getElementById("contentarea");
// 待生成菜单的锚点ID列表，需多个锚点菜单直接往数组加ID即可
const anchorIds = ['v1'];
// 创建DocumentFragment减少DOM操作次数
const fragment = document.createDocumentFragment();
// 创建列表容器
const list = document.createElement('ul');

anchorIds.forEach(id => {
  // 获取对应锚点元素
  const anchorEle = document.getElementById(id);
  if(!anchorEle) return; // 元素不存在直接跳过
  // 创建li元素
  const li = document.createElement('li');
  // 创建a元素
  const link = document.createElement('a');
  // 设置锚点跳转地址
  link.href = `#${id}`;
  // 赋值锚点元素的文本内容到超链接
  link.textContent = anchorEle.textContent.trim();
  // 嵌套元素
  li.appendChild(link);
  list.appendChild(li);
});

// 把完整列表塞进fragment，一次性插入到页面容器
fragment.appendChild(list);
container.appendChild(fragment);

jQuery实现版本（适配你代码中的$语法）

const container = $('#contentarea');
const anchorIds = ['v1'];
const list = $('<ul></ul>');

anchorIds.forEach(id => {
  const anchorText = $(`#${id}`).text().trim();
  if(!anchorText) return;
  const li = $('<li></li>');
  const link = $('<a></a>').attr('href', `#${id}`).text(anchorText);
  li.append(link);
  list.append(li);
});

container.append(list);