Javascript 使用单个HTML页面替换a<；部门>；还有很多其他页面？

我正在写一个基本的API文档站点，在我的API中有大约20个端点。我选择了一个HTML页面，页面一侧有一个导航栏，显示子标题，每个子标题都有一个包含相关端点的列表，例如：

Home
    About this API

Users
    Get users
    Add users
    Delete users

Products
    ...

默认情况下，“about this api”突出显示，其本地HTML页面读入侧边栏右侧的空div中

window.onload = function () {

    // Default page
    addContent("content/api/about_api.html", "content");
};

function addContent(page, element) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", page, true);
    xhr.onreadystatechange = function () {
        document.getElementById(element).innerHTML = this.responseText;
    };
    xhr.send();
}

单击列表元素时，高亮显示将移动到该选项，并使用作为数据属性存储在元素中的新页面调用相同的函数

---

一切正常，反应灵敏，但我想知道这是不是一个坏习惯？你会推荐一种不同的方法吗？

作为最初的回答，我会说，这是错误的

想想基础，html是框架，css是设计，js是功能。你不应该试图把它们混在一起。如果您没有运行服务器，那么我可以理解您选择此方法的原因。

---

请阅读服务器端渲染和手柄，如果您得到了它们，您的问题将很快被理解

这不是一个坏的做法，实际上它非常常见，被称为单页应用程序

有一些方面需要考虑，例如，如果你没有正确的索引SPA，那么搜索引擎的可访问性。尽管有很多关于SPA的文章和教程，我还是建议大家通读一下