いまさらJQuery。
概要
html内でフッターやヘッダーなどの共通部分のhtmlをincludeするコード。
htmlを記述する際に同じ部分をたくさん書かずに済む。メンテも楽！
(2019/3/13追記)
もうちょっと実用的な関数を後日作りました。
コード
共通部分を呼び出したいhtmlファイルの一部。共通部分は<div class="target"></div>の中に展開されます。
index.htmlの一部
<script type="text/javascript" src="includeTemplateHTML.js">
IncludeTemplateHTML("div.target","/Path/Of/templateHTML.html");
</script>
<div class="target"></div>
共通部分を呼び出すためのJS関数。
includeTemplateHTML.js
function IncludeTemplateHTML(selector,filepath){
$(function (){
$.ajaxSetup({cache:false});
$(selector).load(filepath);
});
}
補足
template自体が共通部分なのでさらにその中の一部分を呼びたい、ということはほとんどないと思いますが、
引数のfilepathを
filepath="/Path/Of/templateHTML.html div#hogehoge"
にかえてやればtemplateHTML.htmlのdivタグのid="hogehoge"の内容だけをselectorにインクルードさせることができます。