循环添加的<li>未应用CSS菜单样式，如何排查解决？

问题根源 #

你每次用innerHTML +=修改内容时，浏览器会自动修复不完整的HTML结构。第一次给header设置innerHTML时，你只写了<ul class="menu">的开头和第一个<li>，没写闭合的</ul>，浏览器会自动帮你补全这个闭合标签。这就导致后面循环添加的<li>根本不在class="menu"的<ul>里面，自然不会应用横向排列的样式，只能默认垂直排列。

解决办法 #

方法1：先拼接完整HTML字符串再赋值 #

把所有要插入的内容先拼成一个完整的字符串，最后一次性赋值给header的innerHTML，避免浏览器提前闭合标签：

function MainPage(){
    document.querySelector('title').innerText = "Main";
    // 先拼接所有内容
    let headerHtml = `
        <h1 style="color:rgb(50, 35, 117);"><p align="center">Music Albums</p></h1>
        <hr>
        <ul class="menu">
            <li><a onclick="MainPage()">Main</a></li>`;
    countries.forEach(country => {
        headerHtml += `<li><a onclick="CategoryPage('${country.id}')">${country.name}</a></li>`;
    });
    headerHtml += `</ul>`;
    // 一次性赋值
    document.querySelector('header').innerHTML = headerHtml;
}

方法2：用DOM操作创建元素（更推荐） #

直接创建DOM元素，手动构建结构，避免HTML字符串拼接的问题：

function MainPage(){
    document.querySelector('title').innerText = "Main";
    const header = document.querySelector('header');
    // 清空header原有内容
    header.innerHTML = '';
    
    // 创建标题和水平线
    const h1 = document.createElement('h1');
    h1.style.color = 'rgb(50, 35, 117)';
    const p = document.createElement('p');
    p.align = 'center';
    p.textContent = 'Music Albums';
    h1.appendChild(p);
    header.appendChild(h1);
    
    const hr = document.createElement('hr');
    header.appendChild(hr);
    
    // 创建菜单ul
    const menuUl = document.createElement('ul');
    menuUl.classList.add('menu');
    
    // 添加Main选项
    const mainLi = document.createElement('li');
    const mainA = document.createElement('a');
    mainA.onclick = MainPage;
    mainA.textContent = 'Main';
    mainLi.appendChild(mainA);
    menuUl.appendChild(mainLi);
    
    // 循环添加国家选项
    countries.forEach(country => {
        const li = document.createElement('li');
        const a = document.createElement('a');
        a.onclick = () => CategoryPage(country.id);
        a.textContent = country.name;
        li.appendChild(a);
        menuUl.appendChild(li);
    });
    
    // 把ul加到header里
    header.appendChild(menuUl);
}

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