HTML
JavaScript
jQuery

JQueryでhtmlをincludeする

いまさら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にインクルードさせることができます。


参考