Can I make a lot of .js files like navbar.js or footer.js, and it's only role is to append elements to the DOM?

Can I make a lot of .js files like navbar.js or footer.js, and it's only role is to append elements to the DOM?
0

#1

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?


#2

I’m not an expert - hell, I’m not even component when it comes to web accessibility - but I don’t think you have to worry about assistive technology when you’re doing DOM manipulation, so long as you’re (as you mentioned) using semantic markup. I could be wrong, though.

You’re absolutely right to want to split up your files into components while you’re building, and there are a number of technologies available that do this very well. React, Vue, Angular, and Ember come to mind in the realm of JavaScript. Pug is a great way to split up HTML files. Handlebars and Moustache are equal parts JS and HTML.


#3

Hi, I’d suggest using a server side programming language like php, ruby, python…the list goes on. You could also try creating a folder with the html file in it and linking to it through an iframe.

<html>
<body>
    <iframe src="nav.html" class="navbar" />
    <!-- other content here -->
</body>
</html

#4

I think server side includes would be preferrable to using an iframe.

If you use a templating engine on your server, like EJS, you can have partial files that get included in your main pages:

// navbar.ejs
<nav>
    <div class="nav-wrapper">
      <a href="/" class="brand-logo">App Name</a>
    </div>
</nav>
// index.ejs
<!DOCTYPE html>
<html>
  <head>
    <% include ../partials/header.ejs %> // you can include your header scripts & links too
  </head>
  <body>
    <% include ../partials/navbar.ejs %>
</body>
</html>     

#5

@portablestick is right - this is what front-end frameworks like React and others do, with the added benefit of them handling things like data flow and state management for as well.