Question

I’m trying to come up with a purely front-end solution to a common practice.

In the past, I’ve stored the HTML for reused website elements (like the <nav>, <header>, <footer>, etc.) in a functions.php file, and used php functions to call these things in on multiple pages. This of course makes it easier to make changes site-wide, making my life easier.

However, I don’t really want to use PHP (or in the past, ASP) to do this anymore. Does any one know of a clean way to do this in Javascript, jQuery or even Node? To be clear I want to call a function in the HTML (like writeNav(); ) that pulls the HTML for the nav. I’d rather not include <script> tags everywhere, if possible.

Answer 1

One very common solution for “building up a library of chunks of HTML that can be reused elsewhere” is “templating”. There are numerous templating libraries to choose from (Underscore even has its own, small, template function), but I’d recommend looking at Handlebars.js first, as it’s very robust but also very simple.

Handlebars templates will allow you to store your HTML however you want:

• in strings in your .js files,
• in <script type='text/handlebars'> tags on your html pages, or
• in separate html files that get compiled in to a single JS file

It will also allow you to swap out small pieces of the HTML, so that you could (for instance) have a header that gets used all over, but replaces the title, like so:

<h3>{{title}}</h3>

The Handlebars site (http://handlebarsjs.com/) has an excellent run through; I highly recommend it.