jQueryによる外部ファイル読込・表示

jQueryを用いています。head部に　<script src="http://code.jquery.com/jquery-latest.js"></script< が必要です。

ここでは、このページを親HTMLといい、親HTMLから読み込まれて表示されるHTMLファイル（called/called1.html）を子HTMLといいます。

基本形

外部HTMLファイルを表示場所に書き込みます。

<script>
function includeHtml(表示場所, 子HTML) {
    $(表示場所).load(子HTML);
}
</script>

↓ 子HTML（called/called1.html）の内容

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>.maroon {color:maroon}</style>        <!-- ア -->
<script>
function funcHead() {
    alert("called1.html head部script実行");  <!-- イ -->
}
</script>
</head>
<body>
<script>
function funcBody() {
    alert("called1.html body部script実行");  <!-- ウ -->
}
</script>
<style>.teal{color:teal}</style>             <!-- エ -->
<tagＡ>                                      <!-- オ -->
<p id="idＢ">カ <p id="idＢ"><br> 
<span class="maroon">キ　class="maroon"</span>
<span class="teal">ク　class="teal"</span>
<span class="red">ケ　class="red"</span>
</p>                                         <!-- コ -->
<h4 class="teal">サ　class="teal"</h4>
シ<button onClick="funcHead()">funcHead実行</button><br>
ス<button onClick="funcBody()">funcBody実行</button><br>
</tagＡ>                                     <!-- セ -->
<img src="120x80.jpg"><br>                   <!-- ソ -->
<img src="called/120x80.jpg">                <!-- タ -->
</body>
</html>

↓　<div id="ＪＩＨ表示場所１"></div>

下のscriptは、親HTMLがロードされた時点で実行されます。
それにより、子HTML（called/called1.html）が、上のＪＩＨ表示場所１に取り込まれました。
キはアで指定したmaroon、クはオで指定したtealになっています。
ケはcalled2には指定がないのですが、親HTMLのhead部で指定した<style> .red{color:red}</style>によりredになっています。
シはイ、スはウを実行します。取り込まれた場合も正常に実行されます。
画像の相対位置は子HTMLからは120x80.jpgですが、親HTMLからはcalled/120x80.jpgになるので、ソはエラーになります。
逆にタは子HTMLを単独で用いたときはエラーになり、取り込まれたときは表示されます。

ロード時（onLoad）に自動表示する

ここに　<script>includeHtml("#ＪＩＨ表示場所１", "called/called1.html");</script>　があります。

●重要
ページのロード時に実行するスクリプトの記述場所（script）よりも前に表示場所を記述しておく必要があります（逆だと表示されません）。

このようなロード時実行スクリプトは複数あったもかまいません。
ここに　<div id="ＪＩＨ表示場所２"></div>　があります。

ここに　<script>includeHtml("#ＪＩＨ表示場所２", "called/called2.html");</script>　があります。

クリックしたとき（onClick）に表示する

この場合は、scriptと表示場所の記述順序に関する制約はありません。scriptが先にあっても実行されます。
↓　<button onClick="includeHtml('#ＪＩＨ表示場所３', 'called/called2.html')">実行</button>

↓　<div id="ＪＩＨ表示場所３"></div>

要素による表示部分の選択

要素（tag, id, class）により、表示される部分を選択できます。
全体が読み込まれるので、選択場所以外での指定（styleやscript）も反映されます。

「子HTML + 半角スペース + 要素」とすればよいのです。
　　タグ：　　タグ（< > は付けない）
　　ＩＤ：　　#ＩＤ名
　　class：　.クラス名

↓ 子HTML（called/called1.html）の内容（再掲）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>.maroon {color:maroon}</style>        <!-- ア -->
<script>
function funcHead() {
    alert("called1.html head部script実行");  <!-- イ -->
}
</script>
</head>
<body>
<script>
function funcBody() {
    alert("called1.html body部script実行");  <!-- ウ -->
}
</script>
<style>.teal{color:teal}</style>             <!-- エ -->
<tagＡ>                                      <!-- オ -->
<p id="idＢ">カ <p id="idＢ"><br> 
<span class="maroon">キ　class="maroon"</span>
<span class="teal">ク　class="teal"</span>
<span class="red">ケ　class="red"</span>
</p>                                         <!-- コ -->
<h4 class="teal">サ　class="teal"</h4>
シ<button onClick="funcHead()">funcHead実行</button><br>
ス<button onClick="funcBody()">funcBody実行</button><br>
</tagＡ>                                     <!-- セ -->
<img src="120x80.jpg"><br>                   <!-- ソ -->
<img src="called/120x80.jpg">                <!-- タ -->
</body>
</html>

↓　<div id="ＪＩＨ表示場所４"></div>

タグ指定。< > はつけない
tag=<tagＡ> は自作タグ。オ～セが対象
ア・エのstyle、イ・エのscriptは対象外の場所に記述されているが、有効に反映される。
tag=<img> ソ・タが対象。ソの<br>は対象外
親HTMLからの相対指定になるので、ソはエラー、タが表示される。

ｉｄ指定　「#」をつける
id='idＢ' カ～コが対象
キはア、クはエの指定が有効。ケは親HTMLでの指定が有効になる

クラス指定「.」をつける
class='teal' ク・サが対象
このように複数の場所を選択して表示するのに便利