Javascript 引导导航栏可用于所有我的html页面

我正在构建一些前端html、css和js来显示通过WebSocket传递的信息。在这个阶段，我目前手动键入所有html页面，并通过单击按钮将这些页面引用到一起。然而，在网上阅读之后，我相信有更好的方法。具体来说，我希望bootstrap的导航条元素能够在我的所有页面上共享。但是，目前，我必须手动将代码输入到导航栏的每个html页面10+中。必须有一种更好的方法来做到这一点，即更具可扩展性和可扩展性

您可能会说，“是的，我知道如何修复它，使用node.js后端和react前端”。然而，唯一的问题是，我正在从事的项目需要一个解决方案，它可以在没有CDN的情况下工作。此外，它必须尽可能轻

---

在js中是否有我所缺少的更简单的方法/库？我对web开发非常陌生，但我确实有嵌入式系统方面的经验。

如果您是在visual studio上开发的，请尝试制作母版页，它将作为您所有页面的父页

如果没有，那么使用bootstrap4类，这使得创建导航栏非常容易

---

注意：下载bootstrap 4脱机文件，而不是通过cdn添加，以加快加载速度

如果您试图在不同的页面上添加相同的内容，则需要创建具有相同id的元素，使用要重复的内容创建一个外部.js文件，并从页面底部调用它

一般示例：

<div id="demo"></div> <!-- this where the content would be. Create this div on different pages and embed the script inorder to get content. -->
<script src="demo.js"></script>

demo.js file: 
<script>
var nav = // the content - example of bootstrap's nav
'<nav class="navbar navbar-expand-lg navbar-light bg-light">'+
'  <a class="navbar-brand" href="#">Navbar</a>'+
'  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">' +
'    <span class="navbar-toggler-icon"></span>' +
'  </button>' +
'  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">'+
'    <div class="navbar-nav">'+
'      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>' +
'      <a class="nav-item nav-link" href="#">Features</a>' +
'      <a class="nav-item nav-link" href="#">Pricing</a>' +
'      <a class="nav-item nav-link disabled" href="#">Disabled</a>' +
'    </div>' +
'  </div>' +
'</nav>';

var demo = document.getElementById('demo'); // target element.
demo.insertAdjacentHTML('beforeend', nav); // add content.
</script>

demo.js文件：
var nav=//引导程序的nav的内容示例
''+
'  '+
'  ' +
'    ' +
'  ' +
'  '+
'    '+
'      ' +
'      ' +
'      ' +
'      ' +
'    ' +
'  ' +
'';
var demo=document.getElementById（'demo'）；//目标元素。
demo.insertAdjacentHTML（'beforeend'，nav）；//添加内容。

---

阅读更多可能的内容，希望获得帮助。

是否尝试将相同的内容（即导航栏）添加到不同的页面？是的，我尝试将相同的导航栏添加到多个页面。我不认为复制和粘贴代码有什么意义，因为1）这是糟糕的编程，2）使修改代码变得更加困难（尤其是当我的项目变得更大时）。感谢您的反馈！我现在正在使用vs代码。我已经下载了bootstrap 4脱机文件，并将它们加载到我的项目中。对于Boostrap 4类，我仍然需要将该类放在我的每个html文件中，不是吗？是的，你必须在每个文件中引用它们