ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

● STEP 1-4

ドンドン増えるログを出してみよう

スタートボタンが押されたら「開始」と表示する

　一通りストップウォッチ本体のコードは書けました。最後の仕様であった、ボタンを押した際のログを作成していきます（リスト1-4-011-4-02）。setIntervalを呼び出した後に新しくHTMLタグを追加するコードを書きます。このようなHTML要素の操作にはDOM（Document Object Model）という概念が背景にあるのですが、詳しくはこのステップの最後に解説をします。

DEMO https://books.circlearound.co.jp/step-up-javascript/demos/step1/9

1-4-01　index.html

<div id="stopWatchPanel">

　...

　<div class="actions">

　　...

　</div>

　<div class="log"></div>

</div>

1-4-02　main.js

　追加したコードの意味を順に見ていきましょう（❶）。

　document.createElementは、指定した名前のHTMLタグ要素を作成することができる関数です。今回はdivを指定しているので、divタグが作成されます。これをmessageElmという変数に代入しました。 ...