【エクササイズ】DOMの新規作成・追加・削除・全削除をする【JavaScript】

課題
  • JavaScriptでDOMを新規作成する(createElement)
  • DOMを別のDOMに追加する(appendChild)
  • 特定のDOMを削除する(removeChild)
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

GitHub : js_excercise_for_frontend_3

課題解決するために参考になる資料

JavaScriptで新規作成したDOMを別のDOMに追加する

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-create-an-dom-and-append-child/

今回の課題ではDOMを新規作成するものと、新規作成したDOMを別のDOMに追加するものがあります。

新規作成では「createElement」、DOMの追加では「appendChild」を使います。

それぞれの使い方は上記記事で解説しているので、そちらを参考にして頂けたらと思います。

JavaScriptで特定の要素を削除、子要素を全削除する

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-remove-dom/

今回の課題では特定の要素を1つ削除するものと、特定の要素に含まれる全ての子要素を削除(全削除)するものが用意されています。

DOMの削除には「removeChild」を使います。

removeChildを使ったDOMの削除・全削除の方法は上記記事で解説しているので、そちらを参考にして頂けたらと思います。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...