How to handle common code in multiple HTML's using javascript or jQuery

html, javascript, jquery

Solution

There are several ways you can achieve this inclusion to keep your code more maintainable.

PHP

Of course the first that comes to mind is if you want to use PHP is the usage of `include()` which includes and evaluates the code in your external file or script.

You can use it as such:

<?php include('path/to/file.html'); ?>

Note! Be careful: your container file must be a `.php` file in order for this directive to be evaluated from the server. You don't need to do anything but changing the file extension, for that to happen. And, of course, make sure that your server can parse PHP.

Also, beware of the difference with `include_once()`, which I would not recommend in this case.

SSI (Server side include)

If you don't want to use PHP, you can do that very simple and clean with a Server side include[Wikipedia]. An SSI looks like an HTML comment:

<!--#include virtual="your.html" -->

Note! You will have to make sure to have `mod_include` installed and enabled in your Apache server, and to add the following directive either in your `httpd.conf` or `.htaccess` file:

Options +Includes

Read the doc link above for more information.

Client-side includes

Your question actually specifies to do this in JS or jQuery. Not sure if it does because you were not aware of the server-side options, or if you really wanted a client-side one. In any case, there are also some client-side solutions.

Given the possibility, I would recommend the server-side solutions to your problem.

IFrame element

The `<iframe>` element includes content from an external file in a separate area in your page. You can use it like so:

<iframe src="your.html" width="x" height="y"><p>Fallback text</p></iframe>

Object element

The `<object>` element does a similar thing to the `<iframe>`, but while the latter is designed more as a means to sandbox an application, the former feels more integrated in your page. The usage is as follows:

<object type="text/html" data="your.html"></object>

Javascript insertion

Convert the code into a Javascript file and instruct the file to insert the content into the DOM. Here is an example

external.js

var element = '<div>
                   <ul>
                     <li class="current"><a href=".html" ></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                   </ul>
               </div>';

container.html

<script type="text/javascript" src="external.js"></script>
<script>
     document.getElementById('#containing-element').innerHTML(element);
</script>

AJAX

jQuery can help you deal with some AJAX calls easily. You could use `jQuery.get()` or `jQuery.load()`. I would suggest you use the latter, as `load()` injects the loaded element directly into the DOM, and also as you can specify exactly which part to load, which is nifty especially if you would like to store all your includes in one external HTML file.

jQuery(document).ready(function ($){
    $('#containing-element').load('your.html');
});

Problem

Original source