HTMLコードの再利用

同じヘッダーまたは下部を持つ複数の 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の内容を変更するだけで済みます。

おすすめ

転載: blog.csdn.net/alpha105/article/details/131031251