How to include files in HTML

February 7, 2015

via JavaScript

a.html

code

<html>
  <body>
    <h1>Put here your HTML content before insertion of b.js.</h1>
    ...

    <script src="b.js"></script>

    ...

    <p>And here whatever content you want afterwards.</p>
  </body>
</html>

b.js:

code

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
        <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

JavaScript is preferred since jQuery is that jQuery.js is ~90kb in size. Keep the amount of data to load as small as possible.

In order to insert the escape characters without much work, it is recommended to use a simple regular expression that matches whole lines (^.*$) and adds \ at the end of each line. For example, you could use sed on the command line like this:

code

sed 's/^.*$/&\\/g;' b.html > escapedB.html

via jQuery

a.html:

code

<html>
  <head>
    <script src="jquery.js"></script>
    <script>
      $(function () {
        $("#includedContent").load("b.html");
      });
    </script>
  </head>

  <body>
    <div id="includedContent"></div>
  </body>
</html>

b.html:

code


<p> This is my include file </p>

jQuery .load() Documentation

via Server Side Includes (SSI)

A simple server side include directive to include another file found in the same folder looks like this:

code

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

configuring SSI for your server

How to include files in HTML

via JavaScript

via jQuery

via Server Side Includes (SSI)

Links