JAVAScriptを使用して、クリックで任意の場所にHTMLをインクルードしたい

ページを読み込んだと同時に、HTMLのインクルードさせる方法は、ネットを調べて分かったのですが、ボタンをクリックしてHTMLをインクルードしたいです。
下記のようなソースを記述したのですが、上手く動作しません。
予定ではボタンを押下すると、id="header"の部分に、header.htmlの内容が表示されるのですが
（ブラウザの表示上では"ここにheader.htmlが読み込まれる"が、違う表示に変更される）
なんの変更もされません。
エラーメッセージも表示されません。
ご教授いただければと思います。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
6<script>
7$('#button').on('click', function() {
8   $("#header").include("header.html");
9});
10</script>
11</head>
12<body>
13   <button id="button">ボタン</button>
14   <div id="header">
15     ここにheader.htmlが読み込まれる
16   </div>
17   
18   <div id="main">
19     メインコンテンツは直接記述
20   </div>
21   
22</body>
23</html>

よろしくお願いいたします。

m.ts10806

2018/08/20 06:38

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1

saheall1976

2018/08/20 06:44

ご指摘ありがとうございました。質問内容を編集いたしました。

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

回答1件

ベストアンサー

loadすればよいかと

javascript
1$(function(){
2  $('#button').on('click', function() {
3    $("#header").load("header.html");
4  });
5});
6

汎用的に書くなら$.ajax

javascript
1$(function(){
2  $('#button').on('click', function() {
3    $.ajax({
4    url:"header.html",
5    }).done(function(data){
6      $("#header").html(data);
7    });
8  });
9});
10