我知道可以使用php/jquery进行此操作，但是我没有找到工作的香草JavaScript解决方案。我在Vanilla JavaScript中这样做主要是作为一种学习体验，所以请不要php/jQuery。
这是我的答案，这就是我所拥有的。
//load_essentials.js
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> NavBar </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav id="myNav"></nav>
This is the content in the home page.
<script src="load_essentials.js"></script>
</body>
</html>这是关于.html的：
<!--about.html-->
<nav id="myNav"></nav>
<script src="load_essentials.js"></script>
Hello World, this is my about me page!
问题是当某人单击index.html中的纳维巴尔(Navbar(中的关于链接时，navbar in of.html没有bootstrap造型(蓝色文本(，这只是一个纯黑色的无序列表。我可以从index.html复制并粘贴 <head></head>到每个页面上，但是必须有一种更好的方法来在香草javascript中进行此操作？
enspersions.js做以下操作：
document.getElementById("myNav").innerHTML =
`<ul id='navLinks'>
<li><a href='index.html'>Home</a></li>
<li><a href='about.html'>About</a>
<li><a href='donate.html'>Donate</a></li>
</ul>`;
document.querySelector("head").innerHTML +=
`
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- you might want to add some other libraries to load here -->
`;
并将其加载到每个页面中。
不要使用JavaScript链接样式表。最好将您的样式表链接在HTML文件中的样式表，例如...
<link rel="stylesheet" type="text/css" href="yourname.css">
元数据标签
希望您知道每个页面都必须下载某些文件以使用Bootstrap。请特别注意演示中每个<link>和<style>和<script>标签的位置。至关重要的是，您必须完全熟悉外部文件以及不属于流程的一部分的内联标签(不可见且不会影响布局(。
html/css
Bootstrap的布局和行为的90％是面向类别的。您可以安全地假设布局中的任何标签都需要BS类才能对其进行样式。OP中提供的HTMLSTRING没有任何类别，因此当然不会像预期的那样出现。
javascript
尽管通常用于渲染HTMLString，但.innerHTML具有一些通常被忽略的缺点。一个主要问题是，它重写了目标标签中的所有内容，该标签需要不需要的处理并删除任何附带的事件。而是使用.insertAdjacentHTML() - 它不会破坏内容加上HTMLString可以通过第一个参数确定的位置：
document.querySelector('.navbar').insertAdjacentHTML(position, htmlString)
/**@ Param: [position] "beforebegin" - in front of .navbar as next sibling
"afterbegin" - within .navbar as first child
"beforeend" - within .navbar as last child
"afterend" - behind .navbar as previous sibling
*/
不要限制#id，还有其他方法可以通过.class，[属性]和标签访问标签。使用.querySelector()选择任何CSS/jQuery Selector的单个标签。
`<nav id='nav1' class='navbar' name='navigation'></nav>
// by #id
document.querySelector('#nav1')
// by .class
document.querySelector('.navbar')
// by [attribute]
document.querySelector('[name=navigator]')
// by tag
document.querySelector('nav')
在多个选择器的情况下(有效HTML中的#id除外(，qS()将在页面上获得第一个。如果您需要针对标签以外的第一个标签，则需要使用qS()进行以下操作之一(例如，要访问第二个nav标签(：
手动或动态
添加不同的属性(建议使用(更改选择器
document.querySelector("nav:nth-of-type(2)")- 使用DOM属性
document.querySelector('ul').parentElement - 使用
.querySelector所有()将所有nav标签收集到节点级var navs = document.querySelector('nav')然后navs[1]
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> NavBar </title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style>
/* extra styles may be added here */
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark"></nav>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
document.querySelector(".navbar").insertAdjacentHTML('beforeend', `<ul class='navbar-nav'>
<li class="nav-item">
<a class='nav-link' href='index.html'>Home</a>
</li>
<li class="nav-item">
<a class='nav-link' href='about.html'>About</a>
</li>
<li class="nav-item">
<a class='nav-link' href='donate.html'>Donate</a>
</li>
</ul>`);
</script>
</body>
</html>