こんにちは、yutaです。
今回はJavascriptで、HTMLの要素を動的に追加・削除する方法を解説します。実際どれほど使用頻度があるかわかりませんが、参考程度に覚えておくと良いかもしれません。
記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。
1.デモンストレーション
2.コードの解説
document.getElementById() : 指定したid名の要素を取得
document.createElement() : 指定した要素を生成
17,18行目ではこれらを使って、変数objAにdivを取得、変数objPにp要素を生成しています。
objP.innerHTML : p要素に中身を付加
objP.id : p要素にidを付加
19,20行目ではこれらを使って、p要素の中身とidを付加しています。
これで要素の生成と中身の記述ができたのであとは、下の命令を使って好きなタイミングで要素を追加・削除してあげればOK。
obJA.appendChild() : 指定した変数に格納された要素をobjAに追加
obJA.removeChild() : 指定した変数に格納された要素をobjAから削除
削除するときは、document.getElementByID()を使って、対象要素を取得する必要があるので、27行目で変数objPdelに生成したp要素を取得しています。
