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

i have application has 30 html's , share common code f made changes need change on every page. below piece of code using on pages.

<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> 

is there solution can keep on single file , reuse ever want?

there several ways can achieve inclusion keep code more maintainable.

php

---

of course first comes mind if want use php usage of include() includes , evaluates code in external file or script.

you can use such:

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

note! careful: container file must .php file in order directive evaluated server. don't need changing file extension, happen. and, of course, make sure server can parse php.

also, beware of difference include_once(), not recommend in case.

ssi (server side include)

---

if don't want use php, can simple , clean server side include^[wikipedia]. ssi looks html comment:

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

note! have make sure have mod_include installed , enabled in apache server, , add following directive either in httpd.conf or .htaccess file:

options +includes 

read doc link above more information.

client-side includes

---

your question specifies in js or jquery. not sure if because not aware of server-side options, or if wanted client-side one. in case, there client-side solutions.

given possibility, i recommend server-side solutions problem.

iframe element

---

the <iframe> element includes content external file in separate area in page. can use so:

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

object element

---

the <object> element similar thing <iframe>, while latter designed more means sandbox application, former feels more integrated in page. usage follows:

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

javascript insertion

---

convert code javascript file , instruct file insert content dom. here 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 deal ajax calls easily. use jquery.get() or jquery.load(). suggest use latter, load() injects loaded element directly dom, , can specify part load, nifty if store includes in 1 external html file.

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