HTML共通部分を部品化して読み込ませる方法

ページで共通となる要素を一律で読み込む方法をご紹介いたします。

手順

1.HTMLのdiv要素には以下のIDを振って下さい。

<div id="haader"></div>
<div id="footer"></div>

2.Javascript側には下記のコードを先頭に追記して、部品を紐付けて下さい。

<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>

これで共通のヘッダーとフッターを読み込むことが可能になります。