JavaScript 基礎

JavaScript基礎内容について記述する。

・divを動的に生成する

<script type="text/javascript">
      'use strict';

　　//空のdiv要素作成
      const div = document.createElement('div');
      //boxを作るため、divにboxをaddする
      div.classList.add('box');

　  //div内にiの文字を表示させる
      div.textContent= i;
      //イベントリスナーを付ける
      div.addEventListener('click',function(){
        //サークルを作りたいので、toggleを設定
        div.classList.toggle('circle');
      });
  //↓ブラウザーに表示させるために書いている
  //divの最後の要素として認識されるため、ブラウザーに表示させる
      document.body.appendChild(div);
    }

    </script>