Javascript 将HTML文件内容加载到元素中

我正在尝试构建一个菜单，动态地更改id为“main content”的div的内容

我已经到了让switch语句正常工作的地步，并且根据单击的链接调用了正确的case，但是它没有用新内容更新innerHTML

let currentUrl;
const content = document.getElementById('main-content');
const logo = document.getElementById('header-logo');

const links = document.getElementsByClassName('side-menu__sub-menu__item-link');
const domain = '$*cdn';
const pagesDir = 'views/styleguide/pages';
const link = `${domain}/${pagesDir}`;
const pages = {
    "Typography": {
        "title": 'Typography',
        "link": `${link}/typography.html`,
    },
    "ColorPalette": {
        "title": 'Color Palette',
        "link": `${link}/colorPalette.html`,
    },
    "Home": {
        "title": 'Home',
        "link": `${link}/home.html`,
    }
}

async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

async function LoadPage(href) {
    switch(href) {
        case pages.Typography.title:
            console.log("page loaded ", href, "type");
            content.innerHTML = await fetchHtmlAsText(pages.Typography.link);
            break;
        case pages.ColorPalette.title:
            console.log("page loaded ", href, "color");
            content.innerHTML = await fetchHtmlAsText(pages.ColorPalette.link);
            break;
        default:
            content.innerHTML = await fetchHtmlAsText(pages.Home.link);
            break;
    };
}

for (let link = 0; link < links.length; link += 1) {
    links[link].addEventListener('click', () => {
        const parent = links[link].parentElement.parentElement;
        let href;

        // check if parent element exists and if it does get the
        // value of the href attribute
        if (parent) {
            href = parent.getAttribute('href').replace('#', '');
        }

        // Check if link matches the current page
        if (currentUrl !== href) {
            LoadPage(href);
        }
    });
}


logo.addEventListener('click', () => {
    LoadPage('');
});

let currentUrl；
const content=document.getElementById（'main-content'）；
const logo=document.getElementById（'header-logo'）；
const links=document.getElementsByClassName（'side-menu__子菜单__项链接'）；
常量域='$*cdn'；
const pagesDir='views/styleguide/pages'；
常量链接=`${domain}/${pagesDir}`；
常量页={
“印刷术”：{
“标题”：“排版”，
“link”：`${link}/typography.html`，
},
“调色板”：{
“标题”：“调色板”，
“link”：`${link}/colorplate.html`，
},
“家”：{
“头衔”：“家”，
“link”：“${link}/home.html”，
}
}
异步函数fetchHtmlAsText（url）{
返回wait（wait fetch（url））.text（）；
}
异步函数加载页（href）{
开关（href）{
案例页面。排版。标题：
log（“页面加载”，href，“类型”）；
content.innerHTML=await-fetchHtmlAsText（pages.Typography.link）；
打破
case pages.colorplate.title：
log（“页面加载”，href，“颜色”）；
content.innerHTML=await-fetchHtmlAsText（pages.colorplate.link）；
打破
违约：
content.innerHTML=await-fetchHtmlAsText（pages.Home.link）；
打破
};
}
对于（让link=0；link{
const parent=links[link].parentElement.parentElement；
让href；
//检查父元素是否存在，以及是否获得
//href属性的值
如果（家长）{
href=parent.getAttribute（'href'）。替换（'#'，''）；
}
//检查链接是否与当前页面匹配
如果（当前URL！==href）{
加载页面（href）；
}
});
}
logo.addEventListener（'单击'，（）=>{
加载页（“”）；
});

sidemenu.html

<div id="side-menu" class="side-menu">
    <div id="hamburger" class="side-menu__hamburger">
        <div id="side-menu__hamburger__line-01" class="side-menu__hamburger__line side-menu__hamburger__line__01"></div>
        <div id="side-menu__hamburger__line-02" class="side-menu__hamburger__line side-menu__hamburger__line__02"></div>
        <div id="side-menu__hamburger__line-03" class="side-menu__hamburger__line side-menu__hamburger__line__03"></div>
    </div>
    <ul class="side-menu__sub-menu">
        <a class="side-menu__sub-menu__item-link" href="#colorPalette">
            <li class="side-menu__sub-menu__item">
                <span class="side-menu__sub-menu__item__icon-container">
                    <i class="fas fa-paint-brush side-menu__sub-menu__item__icon-container__icon"></i>
                </span>
                <span class="side-menu__sub-menu__item__text">
                    Colour Palettes
                </span>
            </li>
        </a>

        <a class="side-menu__sub-menu__item-link" href="#typography">
            <li class="side-menu__sub-menu__item">
                <span class="side-menu__sub-menu__item__icon-container">
                    <i class="fas fa-text side-menu__sub-menu__item__icon-container__icon"></i>
                </span>
                <span class="side-menu__sub-menu__item__text">
                    Typopgraphy
                </span>
            </li>
        </a>
    </ul>
</div>

值更新时是否正在呈现html？？不是在将

href

属性传递到

加载页面

函数的时候，我假设该函数是一个链接/href。但是您的switch/case语句将其与标题进行比较，即

case pages.Typography.title

@MarkHughes88当您获取/更新html元素时，它们应该重新呈现DOM以影响。href是文件的位置。我可能应该改变那里的命名法。但是，是的，switch语句正在关闭标题，并更新文件的链接（href）以基于该标题显示。当值更新时，您正在呈现html？？而不是在您将

href

属性传递到

LoadPage

函数时，我假定该函数是一个链接/href。但是您的switch/case语句将其与标题进行比较，即

case pages.Typography.title

@MarkHughes88当您获取/更新html元素时，它们应该重新呈现DOM以影响。href是文件的位置。我可能应该改变那里的命名法。但是，是的，switch语句正在关闭标题，并更新到文件的链接（href）以基于该标题显示