動的に画面を変化させるために、ほぼ空のindex.htmlにjsで画面構成を作る

jQueryの説明はいろんなところで見かけるので、それ以降の画面作りをつらつら書いていく。
基本は当たり前のことを書く感じで。

htmlのbodyは以下

index.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery画面</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/menu.js"></script>
</head>

<body>
  <dl id="body">
  </dl>
</body>

</html>

このhtmlファイルにjQueryでボタンを追加してみる

menu.js

$(function () {
    $('#body').append('<button>hoge</button>');
    $('#body').append('<button>fuga</button>');
    $('#body').append('<button>hoga</button>');
});

index.htmlを開いてみる

出来ました。

    $('#body').append('<button>hoge</button>');

と書くと、id=bodyに、hogeと書き込んでくれる。
Chromeでindexの中身を見ると

<html>
<head>...</head>

<body>
  <dl id="body">
    <button>hoge</button>
    <button>fuga</button>
    <button>hoga</button>
  </dl>

</body>
</html>

ちゃんと記述されていました。（当たり前だけど）

おわり

jQueryで画面にボタンを付ける

動的に画面を変化させるために、ほぼ空のindex.htmlにjsで画面構成を作る