この記事の趣旨
近頃DOMの勉強をしています。
うまくやりたいことが実現できないため、
備忘を兼ねて道のりや手段についてメモをとっていこうと思います。
最終的には解決策のみをまとめたページを作成予定です。
解きたい課題
DOMを利用して、<div>の中に<p>で並んだ要素を、
<ul><li>を用いたリスト形式に変換したい
before
<!DOCTYPE html>
<html lang="ja">
<head>
<title>TEST</title>
</head>
<body>
<div id="foods">
<p>にんじん</p>
<p>じゃがいも</p>
<p>たまねぎ</p>
</div>
<button onclick="dispList()">リスト形式で表示</button>
<script type="text/javascript" src="./scripts/test.js"></script>
</body>
</html>
after
<!DOCTYPE html>
<html lang="ja">
<head>
<title>TEST</title>
</head>
<body>
<!-- ここから -->
<ul id="foods">
<li>にんじん</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
</ul>
<!-- ここまでの変更 -->
<button onclick="dispList()">リスト形式で表示</button>
<script type="text/javascript" src="./scripts/test.js"></script>
</body>
</html>
See the Pen FoodDOM_test01 by SayCheeese (@SayCheeese) on CodePen.
See the Pen FoodDOM_test02 by SayCheeese (@SayCheeese) on CodePen.
戦略
-
<button>がonclick状態になったら以下が行われるようにする - HTMLの
<div id="foods">要素を抽出 - 子要素
<p>のテキストを配列fdTxtArrayとして抽出
["にんじん", "じゃがいも", "たまねぎ"] - fdTxtArrayの各要素を
<li>に収納
<li>にんじん</li> <li>じゃがいも</li> <li>たまねぎ</li> -
<li>要素すべてを<ul>に格納 -
<div>要素の前に<ul>要素をいれる -
<ul>要素に<id="foods">をつける -
<div>要素の削除
進める上で心がけること
- jsにおいて、
const,letは使用しても、varは使わない。
- 出てきたら追記