Question: I am building out some front end html, css and js to display information passed through websockets. At this stage, I am currently manually typing all of the html pages by hand, and referencing the pages together through button clicks. However, after doing some reading on the internet, I believe there is a better way of doing this. Specifically, I would like bootstrap's nav-bar element to be shared across all of my pages. However, at present, I have to manually type the code in to each of my html pages 10+ for the nav bar. There has to be a better way of doing this that is more extensible and scale-able. 

You might say, "Yes I know what will fix it, use node.js backend and react front end". The only problem with this however, is that the project which I am working on requires a solutions that can work without CDN's. In addition, it must be as lightweight as possible.

Is there some easier way/library of doing this in js which I am missing? I am quite new to web development, however I do have experience in embedded systems.

Answer: 
If you are trying to add the same content on different pages you need to create an element with the same id, create a external .js file with the content you want to repeat, and call it from the bottom of the page.

General example:

```
<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>

```

Read [this](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) for more possibilities, Hope that help.
If you are developing on visual studio then try making master page which will act as parent page for all your page.

And if not, then use Bootstrap 4 classes which makes really easy to create the navigation bar

note: Download the bootstrap 4 offline files rather than adding it via cdn to make it load faster