How do I use JavaScript to avoid repeating HTML like headers and footers?

That's not the job of Javascript, unless you are using node. Serving files to the client, is the server job, so the server-side language will usually have a single file for both header and footer, and serve them along with whatever page you want to see.

For example, on a PHP server, the index.html file would be something like this:

<?php include("header.php"); ?>
<!-- index content goes here -->
<?php include("footer.php"); ?>

PD: Its DRY, not DNRY

Hi Travis,

As Iago mentioned this is something you would handle server side with a server side language.

If you go through the "Build a Simple PHP Application" course then you will learn about the code that Iago has posted.

Alternatively, if you have a static site and don't want to bring server side code into this only for the benefits of "includes" then you can look at static site generators.

This will give you the benefits of using templates and not having to repeat your headers and footers but it will generate static html files that you can upload anywhere and not have to worry about server side language support.

Some people even use these for blogs which are traditionally dynamic and handled server side with things like wordpress.

Thank you all for your support and answers. I am digressing from my front-end development track to take the course in php suggested by Mr. Anello. I am very appreciative of all your suggestions, thanks again.

Since I am so new to this I really want to dig deeper into one language before branching out too far. I think JavaScript is for me, could I use node.js as a server side script in order complete this task? If so, would someone please be kind enough to point me in the direction of a tutorial to help me achieve this goal?

I've started here:

http://nodeschool.io/

Any other resources are of course welcome.