実現したいこと

ホームページ制作にあたって、JSを用いた要素の共通化を検討しています。

前提

HTML内にscriptタグを使って、関数を呼び出し別のHTMLファイルを呼び出そうとしました。
ファイル階層は下記の通りです。

js
|-----instagram.js
|-----reusable.js
|-----5-1-14.js

stylesheets
|----省略

templates
|-----diary.html
|-----test.html

該当のソースコード

test.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title></title>
8
9    <!-- Google Fonts -->
10    <link rel="preconnect" href="https://fonts.googleapis.com">
11    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12    <link href="https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
13    
14    <!--stylesheetsの順番に注意。下に行くにつれ上書きされる。  -->
15    <link rel="stylesheet" href="../stylesheets/normalize.css">
16    <link rel="stylesheet" href="../stylesheets/style.css">
17    <link rel="stylesheet" href="../stylesheets/style-laptop.css">
18    <link rel="stylesheet" href="../stylesheets/style-mobile.css">
19    <link rel="stylesheet" href="../stylesheets/style-mobile-instagram.css">
20    
21    <!-- <link rel="stylesheet" href="static/stylesheets/style.css">
22    <link rel="stylesheet" href="static/stylesheets/style-laptop.css">
23    <link rel="stylesheet" href="static/stylesheets/style-mobile.css">
24    <link rel="stylesheet" href="static/stylesheets/style-mobile-instagram.css"> -->
25    <!-- Font Awesome -->
26    <script src="https://kit.fontawesome.com/edc0d4997f.js" crossorigin="anonymous"></script>  
27    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
28    <!--自作のJS-->
29    <script type="text/javascript" src="../js/5-1-14.js"></script>
30    <script type="text/javascript" src="../js/instagram.js"></script>
31    <script type="text/javascript" src="../js/reusable.js"></script>
32
33    
34    
35</head>
36
37<body>
38    <header class="header" id="header">
39        //省略
40    </header>
41
42    <main class="main" id="main">
43
44        //コンテンツを記載。詳細は省略
45        .
46        .
47        .
48
49        <script>diary()</script>
50
51    </main>
52
53    <footer class="footer" id="footer">
54      //省略
55    </footer>
56
57</body>
58</html>

reusable.js
1function diary(){
2    $.ajax({
3        url: "../templates/diary.html",
4        cache: false,
5        success: function(html){
6            document.write(html);
7    
8        }
9    });
10    }

diary.html
1<section>...</section>

上記を試したところ、bodyタグ内に記載した他のhtmlがをかき消すかのようにdiary.htmlがよびだされました。test.htmlで<script>diary()</script>を削除すると、body内の要素が正しく読み込まれ、css,jsも呼び出されます。diary.htmlにはheadを記載していません。test.htmlのbodyタグ内の要素を読み込みつつ、diary.htmlを呼び出す方法をご教授願います。

補足情報（FW/ツールのバージョンなど）

VScodeのliveServerを使用して、開発を行っています。

yambejp

2023/06/21 07:24

$.ajaxのsuccessは古い書き方なのでdoneに移行したほうがよいでしょう

行動規範の内容に同意します

回答1件

ベストアンサー

document.writeではなくinsertAdjacentHTMLなどご利用ください

element.insertAdjacentHTML - Web API | MDN

jQueryでしたら、afterとかbeforeとか.html()とかが良いかもしれません

※非同期でうけとったhtmlをどこに放り込みたいかによります

参考

javascript
1<script>
2window.addEventListener('DOMContentLoaded', async()=>{
3  const footer=document.querySelector('footer');
4  const html=await fetch('diary.html').then(res=>res.text());
5  footer.insertAdjacentHTML('beforeend',html);
6});
7</script>
8<header>header</header>
9<main>main</main>
10<footer>footer</footer>

投稿2023/06/21 07:15

編集2023/06/22 00:35

yambejp

総合スコア117726

kgnmakl

2023/06/21 07:46

回答ありがとうございます。 JSについて、初学のためあまり理解できていないことをご容赦ください。上記の回答ですが、insertAdjacentHTMLを使用した場合、divタグの挿入等は容易に行えますが、footerやお知らせ欄などといった、別ファイルで管理する要素の共通化は難しいように感じました。説明不足でしたが、footer.htmlを変更すると、他のfooter.htmlを読み込んでいるHTMLファイルが更新されるようにしたいです。jQueryのafter, before等も同様なのかなと感じました。