共通部分の指定の仕方がわからない

JavaScriptで共通部分のheader, side, footerを作成してindex.htmlでは適用できたのですが、他のファイル下にあるhtml(下のディレクトリ図で言うpc.html)に適用しようとするとheader, side, footerのいずれも表示されないです。
(参考URL→https://qiita.com/hiroyukiwk/items/f2a74ba1406de9fad6f6)

簡単にディレクトリを書いてみました↓
web
├index.html
├js
│ └include.js
├diary
│ └pc.html
└include
. ├header.html
. ├side.html
. └footer.html

下のheader, side, footerを指定するのが"<script>header('../');</script>"なんですがどのように変更すればよいかわかりません。

index.html

html
1<!DOCTYPE html>
2<html dir="ltr" lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
6<title>*******</title>
7<link rel="icon" type="image/png" href="./images/favicon.png">
8<meta name="keywords" content="">
9<meta name="description" content="">
10<link rel="stylesheet" href="style.css" type="text/css" media="screen">
11<!--[if lt IE 9]>
12<script src="js/html5.js"></script>
13<script src="js/css3-mediaqueries.js"></script>
14<![endif]-->
15<script src="js/jquery1.7.2.min.js"></script>
16<script src="js/script.js"></script>
17<script src="js/include.js"></script>
18</head>
19<body>
20
21<script>header('../');</script>
22
23<div id="wrapper">
24
25	//本文
26	
27	<script>side('../');</script>
28
29</div>
30
31<script>footer('../');</script>
32
33</body>
34</html>

###pc.html

html
1<!DOCTYPE html>
2<html dir="ltr" lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
6<title>*******</title>
7<link rel="icon" type="image/png" href="./images/favicon.png">
8<meta name="keywords" content="">
9<meta name="description" content="">
10<link rel="stylesheet" href="style.css" type="text/css" media="screen">
11<!--[if lt IE 9]>
12<script src="js/html5.js"></script>
13<script src="js/css3-mediaqueries.js"></script>
14<![endif]-->
15<script src="C:/Apache24/home/web/js/jquery1.7.2.min.js"></script>
16<script src="C:/Apache24/home/web/js/script.js"></script>
17<script src="C:/Apache24/home/web/js/include.js"></script>
18</head>
19<body>
20
21<script>header('../');</script>
22
23<div id="wrapper">
24
25	//本文
26	
27	<script>side('../');</script>
28
29</div>
30
31<script>footer('../');</script>
32
33</body>
34</html>

###include.js

js
1function header(rootDir){
2    $.ajax({
3        url: rootDir + "include/header.html",
4        cache: false,
5        async: false,
6        dataType: 'html',
7        success: function(html){
8            html = html.replace(/\{$root\}/g, rootDir); 
9            document.write(html);
10        }
11    });
12}
13
14function side(rootDir){
15    $.ajax({
16        url: rootDir + "include/side.html",
17        cache: false,
18        async: false,
19        dataType: 'html',
20        success: function(html){
21            html = html.replace(/\{$root\}/g, rootDir); 
22            document.write(html);
23        }
24    });
25}
26
27function footer(rootDir){
28    $.ajax({
29        url: rootDir + "include/footer.html",
30        cache: false,
31        async: false,
32        dataType: 'html',
33        success: function(html){
34            html = html.replace(/\{$root\}/g, rootDir); 
35            document.write(html);
36        }
37    });
38}