同じヘッダーまたは下部を持つ複数の HTML ページの場合、コードの重複を避け、変更を容易にするために、JavaScript を使用してコードを再利用できます。例は次のとおりです。
1. JavaScript ファイル (menu.js という名前) を作成し、必要な HTML コードをそのファイルに書き込みます。
function setTchMenu() {
document.getElementById("menu").innerHTML = "<p class=title>在线课程注册系统(教师端)</p><p class=option_right id=me>user_name</p>"
}
2. HTMLのhead内にjsファイルを挿入
<head>
<script src="menu.js" type="text/javascript"></script>
</head>
3. コードを再利用する必要がある HTML 本文に div を挿入し、ID を設定します。
<body>
<div class="menu" id="menu"></div>
</body>
4. HTML スクリプトに関連するコードを記述します (ページの読み込み時にメニューを読み込む例を取り上げます)。
<script>
window.onload = function() {
setTchMenu();
}
</script>
これでHTMLコードの再利用が完了したので、ページ内容を変更する場合はmenu.jsの内容を変更するだけで済みます。