Hello, I’m currently in the wikipedia viewer project and its quite fun to make. Anyhow, I decided I wanted a navbar to be on all my projects and what I made is a navbar.js so I don’t have to copy paste html to all my index.html files. I’m trying this so that I can make other stuff in my page, like the footer maybe, as a .js file. I used require.js to load navbar.js i.e.:
app.js:
requirejs(['navbar', 'dom'], function(dom) {...});
navbar.js:
(function() {
var nav = document.createElement('nav');
nav.setAttribute('class', 'navbar navbar-default navbar-fixed-top navbar-inverse');
var containerDiv = document.createElement('div');
containerDiv.setAttribute('class', 'container-fluid');
var div = document.createElement('div');
div.setAttribute('class', 'navbar-header');
...
...
document.body.children[0].appendChild(nav);
})();
But I remembered that other devices, like screen readers rely on semantic meaning of html elements and might not get anything to show, especially if JavaScript is disabled. I’m not exactly sure what is the recommended practice when it comes to making a separate js file to manipulate the DOM.
I also read somewhere that DOM manipulation like adding elements to document.body is “expensive” or something like its slows down the page. So in my navbar.js I made sure I only append one containing element that has all the other elements I want to show.
So I guess my question is, how exactly can I build elements that appear a lot on my page other than manual copy-pasting? I’m sure the navbar is quite easy to copy paste, but if, for example, I made a change in the navbar then I have to change a lot of pages. Any help?