使用JavaScript的forEach操作DOM生成页面目录不生效问题求助

你写的代码主要存在3个问题：

• 循环中直接赋值innerHTML会覆盖之前插入的内容，遍历完成后目录里只会保留最后一个h2的条目
• 直接插值heading变量会把DOM元素对象转为字符串，显示为[object HTMLHeadingElement]，而非你想要的标题文本
• a标签href属性为空，点击无法跳转到对应标题位置

修正后的可运行代码 #

const h2List = document.querySelectorAll('h2');
const toc = document.querySelector('#toc');
// 先拼接所有目录项HTML，减少DOM操作次数提升性能
let tocHtml = '';

h2List.forEach((heading, index) => {
    // 给h2设置唯一id用于锚点跳转
    const headingId = `toc-h2-${index}`;
    heading.id = headingId;
    // 提取标题文本拼接目录项
    tocHtml += `<li><a href="#${headingId}">${heading.textContent}</a></li>`;
});
// 一次性写入完整目录内容
toc.innerHTML = tocHtml;

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