外部ファイル読み込み

common.js

function writeHeader(rootDir){
	$.ajax({
			url: rootDir + "/header.html", //パスはcommon.jsが読み込まれたHTMLファイルが基準
			cache: false, //キャッシュを利用するか（
			async: false, //非同期で読み込むか
			success: function(html){

					html = html.replace(/\{\$root\}/g, rootDir);
					document.write(html);
			}
	});
}

header.html

<header>
	<nav>
		<ul>
			<li><a href="./{$root}index01.html"></a></li>
			<li><a href="./{$root}index02.html"></a></li>
			<li><a href="./{$root}index03.html"></a></li>
			<li><a href="./{$root}index04.html"></a></li>
			<li><a href="./{$root}index05.html"></a></li>
		</ul>
	</nav>
</header>

index.html

<script type="text/javascript"> writeHeader("./"); </script>