1. デモ

このデモはボタンクリックで要素の追加と削除を行うデモです。追加した要素は、クリックで class を切り替えます。

2. 作り方

要素の生成

ここでは、div 要素を生成、生成した div に class とテキストを入れるのを js で設定し、css で赤い丸の形を設定しています。

//div要素生成しcubeに代入
const cube = document.createElement("div")

//cubeにclass、red_cubeを追加
cube.classList.add("red_cube")

//cube(divの間)にclickというテキストを追加
cube.textContent = "click"

document.createElement() - 指定された HTML 要素を生成
Element.classList.add - class 属性に値を入れる
Node.textContent - 要素のテキストを設定

.red_cube {
  width: 100px;
  height: 100px;
  background: #f71e35;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

ボタンクリックで要素を追加

下記は、ボタンクリックで body タグ内に上記で生成した div 要素(cube)の追加をしています。

<input type="button" value="追加" id="add" />

const addBtn = document.getElementById("add")
addBtn.addEventListener("click", function () {
  document.body.appendChild(cube)
})

document.getElementById(id) - 指定された ID の要素を返す
EventTarget.addEventListener('click', function() { ... }); - EventTarget が click されたら...を実行
document.body.appendChild(xxx) - body に xxx を追加

指定した場所に要素を追加

上記では body タグ内に追加をしていますが、下記は、id を取得して、取得した id が設定されている要素に、上記で生成した div 要素(cube)を追加をしています。

<div class="cube_area" id="addCube"></div>

const addBtn = document.getElementById("add")
addBtn.addEventListener("click", function () {
  const area = document.getElementById("addCube")
  area.appendChild(cube)
})

ボタンクリックで要素を削除

下記は、削除ボタンをクリックすると、生成した div 要素(cube)が削除されるようにしています。

<input type="button" value="削除" id="del"">

const delBtn = document.getElementById("del")
delBtn.addEventListener("click", function () {
  cube.remove()
})

node.remove() - 所属するツリーから削除

生成した要素をクリックで class の切り替え

生成した div 要素(cube)をクリックすると blue_cube という class（background を上書きする class）が class の有無で追加したり削除したりの切り替えを下記で設定しています。

.blue_cube {
  background: #118df0;
}

//cubeをクリックしたらclass、blue_cubeを追加。classがすでにあれば削除
cube.addEventListener("click", function () {
  cube.classList.toggle("blue_cube")
})

classList.toggle() - class の有無で切り替え

onclick 属性について

下記のような書き方でもクリックしたときの処理を実行できます。

<input type="button" onclick="test()" />

function test() {
  //クリックしたときの処理
}

document.getElementById("test").onclick = function () {
  //クリックしたときの処理
}