jQuery loadメソッドでHTMLコンテンツを読み込む

jQueryのloadメソッドを使うとHTMLファイルのコンテンツを指定した要素に読み込むことができる。これを使うと、例えばヘッダー、メニュー、コンテンツから構成されているページがあり、各ページでヘッダー、メニューは同じでコンテンツだけが異なる場合などは、コンテンツだけを読み込んで表示させることができる。

【サンプル】

・HTMLファイル（webcontent2.html）

<h3>アベノミクス３本の矢</h3>
 <ul>
   <li>財政出動</li>
   <li>金融緩和</li>
   <li>成長戦略</li>
</ul>

・jquery

<body>
<script type="text/javascript">
$(function(){
  $('#exec').click(function(){
    var frame = $('#frame');
    $(frame).load('webcontent2.html');
  });
});
</script>
<input id="exec" type="button" value="実行">
<div id="frame"></div>
</body>

上記を実行すれば、HTMLファイルに入っているコンテンツが<div id=”frame”>に読み込まれる。