How to create Javascript templates?

With Handlebars you can easily create templates in js!

See an example of your syntax / Usage:

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

Using {{template}} to make your markup.

Populating the template.

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

Result:

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

Another framework that can realize this is the AngularJS, it is very complete has:

• Two-way Data binding
• Dependency injection
• Creating policies (HTML Extension) < - Template
• Modularisation and reuse (Controllers, Services and Filters)

You can use AngularJS itself to modularize the page. It's possible that you separate the markup, content, and logic of each part of your web app individually.

You can see the documentation for this: link

It is also possible to use template-specific solutions, such as mustache and other template engines for js. Check out the workings of some in: link

If it is simply to separate the header and footer, you can include the angularjs on the page and use the following semantics:

<div ng-include="'includes/header.html'"></div> 

<!-- Conteúdo da página -->

<div ng-include="'includes/footer.html'"></div>