------------------ html ------------------------------------------------
<body>
<input type="button" value="追加" id="add">
<input type="button" value="削除" id="del">
<div class="cube_area" id="addCube"></div>
<script src="index.js"></script>
</body>
---------------
------------------ <style> -------------------------------------------------
.cube_area {
margin: 25px 100px;
}
.red_cube {
width: 100px;
height: 100px;
background: #F71E35; //赤色系
border-radius: 50%;
cursor: pointer; //カーソルの形状を指定する
text-align: center;
line-height: 100px; //テキストの行間
color: #fff; //white
}
.blue_cube {
background: #118DF0;
}
------------------- </style> -------------------------------------------
---------------------ジャバスクリプト <script src="index.js"></script>-------------------------
const cube = document.createElement('div'); // 新しい div 要素を作成します
cube.classList.add('red_cube'); //クラスを追加 。 除去は.classList.remove("");です 参考。
cube.textContent = 'click'; //要素のテキストを設定します。
cube.addEventListener('click', function() {
cube.classList.toggle('blue_cube'); //トグロ定数で切り替える
});
const addBtn = document.getElementById("add");
addBtn.addEventListener('click', function() { //addEventListenerという関数を使うと、１つのイベントで２つの処理を同時に行える
const area = document.getElementById('addCube');
area.appendChild(cube);
});
const delBtn = document.getElementById("del");
delBtn.addEventListener('click', function() {
cube.remove();
});
-------------------------------------------------------------------------------