jQuery で HTML ファイルを読み込んで表示する

非同期通信でファイルを読み込み、指定された要素に表示する。
共通要素の表示に利用したり。

.load() | jQuery API Documentation

同じディレクトリにある links.html の ul 要素を読み込んで、#related_links 要素に表示するよ。

related-links.js

$(document).ready(function() {
    $('#related_links').load('./links.html ul');
});

共通要素の ul は別ファイルで持っておくよ。

links.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta name="robots" content="noindex">
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <ul class="">
    <li>
      <a href="foo.html">
        <div>
          <img src="/img/image.png" alt="image" width="200" height="100">
          <p>lorem</p>
        </div>
      </a>
    </li>
  </ul>

</body>

</html>

いくつかの HTML に表示エリアを用意すると、div 配下に ul 以下のタグが表示されるよ。

some.html

<h3>Related Links</h3>
<div id="related_links"></div>

すっかり使い方を忘れてました。