close

HTMLの共通部分をJQueryの.load()関数で読み込む方法(簡単!)

公開日:

WordPressを構築したことがあるとPHPで共通部分の読み込み方法は知っていると思います。
しかし、新規ソフトウェアのデザイン作成時など、HTMLデータを渡して確認してもらいたいなど、PHPデータでは適していない場合もありますよね。

PHPじゃない場合、共通部分をどうやって読み込むんだっけ!?という方への記事です!

ソースコード

全て同じ階層に格納してください。

最初に読み込むファイル(index.html)

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<title>.load()テスト</title>
</head>
<body>
<header id="header"></header>
<main>test</main>
</body>
</html>

1.JQueryをCDNで読み込んでいます。

.load()関数がjQueryの関数なのでこれを読み込まないとエラーになります。

Jquery CDN で検索かけると最新のJqueryバージョンの読み込みコードが見つかると思います!

2.JSファイルを読み込んでいます。

下で作ります

3.headerにidを付けています

読み込むHTMLファイル(header.html)

<h1>ヘッダータイトル</h1>

JavaScriptファイル(main.js)

$(function(){
$("#header").load("header.html");
});

id 「header」を付けたタグに、header.htmlが読み込まれます。

それではindex.htmlを開いてみましょう

読み込めました。

簡単ですが以上です!

写真について

Location: 秋葉原 Setting :35mm / f4

Comment

メールアドレスが公開されることはありません。