使用JS Array的forEach方法构建导航菜单与无序列表问题求助

1. 现有代码故障修复 #

问题点梳理 #

• 选择器书写错误：document.querySelectorAll("page_header") 直接按标签名匹配，若page_header是类名需加前缀.，是ID需加前缀#，否则无法正确获取对应DOM节点
• 冗余无效代码：代码中创建了anchorTag对象但未实际使用，且给innerText赋值为DOM对象item属于无效操作
• 锚点功能缺失：生成的a标签未添加href属性，点击无法跳转到对应section区域

修复后遍历代码 #

// 选择器根据实际DOM结构调整，类名前缀加. ID前缀加#
const navMenu = document.querySelectorAll(".page_header");
const navList = document.getElementById("menu_list");
const items = Array.from(document.querySelectorAll("section"));

items.forEach((item) => {
    const listItem = document.createElement("li");
    listItem.classList.add("menu-item");
    const sectionName = item.getAttribute('data-nav');
    const sectionID = item.getAttribute('id');
    listItem.innerHTML = createNavItemHTML(sectionID, sectionName);
    navList.appendChild(listItem);
});

2. createNavItemHTML函数改写方案 #

方案1：DOM API实现（更安全，可避免XSS注入风险） #

不需要拼接HTML字符串，直接生成DOM节点，可按需返回字符串或DOM对象：

function createNavItemHTML(id, name) {
    // 参数非空校验
    if (!id || !name) return '';
    const anchor = document.createElement('a');
    anchor.className = 'menu__link';
    anchor.dataset.id = id;
    anchor.href = `#${id}`; // 新增锚点跳转属性
    anchor.textContent = name;
    // 返回HTML字符串用下方代码，要返回DOM对象直接return anchor即可
    return anchor.outerHTML;
}

方案2：增强版字符串拼接实现（加转义逻辑） #

如果需要保留字符串返回形式，新增特殊字符转义逻辑，避免恶意代码注入：

function createNavItemHTML(id, name) {
    if (!id || !name) return '';
    // HTML特殊字符转义函数
    const escapeHTML = (str) => str.replace(/[&<>"']/g, char => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    }[char]));
    return `<a class="menu__link" data-id="${escapeHTML(id)}" href="#${escapeHTML(id)}">${escapeHTML(name)}</a>`;
}

内容的提问来源于stack exchange，提问作者Jonas Achouri Sihlén