「要素を追加する」の確認問題を例題の続きに変更

ut-code · May 13, 2024 · 5b75848 · 5b75848
1 parent f595c39
commit 5b75848
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 33 deletions.
diff --git a/...-dom/_samples/hello-world-bold/index.html → .../_samples/add-element-exercise/index.html b/...-dom/_samples/hello-world-bold/index.html → .../_samples/add-element-exercise/index.html
@@ -5,7 +5,10 @@
     <title>Title</title>
   </head>
   <body>
-    <div id="greeting"></div>
+    <ul id="packing-list">
+      <li>お弁当</li>
+      <li>水筒</li>
+    </ul>
     <script src="./script.js"></script>
   </body>
 </html>
diff --git a/docs/1-trial-session/13-dom/_samples/add-element-exercise/script.js b/docs/1-trial-session/13-dom/_samples/add-element-exercise/script.js
@@ -0,0 +1,11 @@
+const packingList = document.getElementById("packing-list");
+
+const snackItem = document.createElement("li");
+snackItem.textContent = "おやつ";
+
+packingList.appendChild(snackItem);
+
+const capItem = document.createElement("li");
+capItem.textContent = "帽子";
+
+packingList.appendChild(capItem);
diff --git a/docs/1-trial-session/13-dom/_samples/add-element/index.html b/docs/1-trial-session/13-dom/_samples/add-element/index.html
@@ -8,8 +8,6 @@
     <ul id="packing-list">
       <li>お弁当</li>
       <li>水筒</li>
-      <li>タオル</li>
-      <li>レジャーシート</li>
     </ul>
     <script src="./script.js"></script>
   </body>

diff --git a/docs/1-trial-session/13-dom/_samples/add-element/script.js b/docs/1-trial-session/13-dom/_samples/add-element/script.js
@@ -1,5 +1,6 @@
-const newItem = document.createElement("li");
-newItem.textContent = "おやつ";
-
 const packingList = document.getElementById("packing-list");
-packingList.appendChild(newItem);
+
+const snackItem = document.createElement("li");
+snackItem.textContent = "おやつ";
+
+packingList.appendChild(snackItem);
diff --git a/docs/1-trial-session/13-dom/_samples/hello-world-bold/script.js b/docs/1-trial-session/13-dom/_samples/hello-world-bold/script.js
diff --git a/docs/1-trial-session/13-dom/hello-world-bold.png b/docs/1-trial-session/13-dom/hello-world-bold.png
diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx
@@ -119,8 +119,8 @@ greetingElement.style.backgroundColor = "black";
 中身のない空の要素が作成されるので、`textContent` を `おやつ` に設定してみましょう。
 
 ```js title="script.js"
-const newItem = document.createElement("li");
-newItem.textContent = "おやつ";
+const snackItem = document.createElement("li");
+snackItem.textContent = "おやつ";
 ```
 
 そして、`要素1.appendChild(要素2)` とすることで、要素 1 の子要素に要素 2 を追加し、画面に表示することができます。
@@ -130,44 +130,41 @@ newItem.textContent = "おやつ";
 <ul id="packing-list">
   <li>お弁当</li>
   <li>水筒</li>
-  <li>タオル</li>
-  <li>レジャーシート</li>
 </ul>
 ```
 
 ```js title="script.js"
-const newItem = document.createElement("li");
-newItem.textContent = "おやつ";
-
 const packingList = document.getElementById("packing-list");
-packingList.appendChild(newItem);
+
+const snackItem = document.createElement("li");
+snackItem.textContent = "おやつ";
+
+packingList.appendChild(snackItem);
 ```
 
 これで、既存の `ul` 要素の子要素に新しい `li` 要素が追加され、「おやつ」が加わった持ち物リストが表示されます。
 
 ### 確認問題
 
-下のような HTML ファイルがあります。
+上の遠足の持ち物リストに、さらに「帽子」を追加しましょう。
 
-```html title="index.html"
-<div id="greeting"></div>
-```
+<Answer>
 
-JavaScript を使って、太字で `Hello World!` と表示されるようにしてください。
+```js title="script.js"
+const packingList = document.getElementById("packing-list");
 
-![太字で表示された Hello World!](./hello-world-bold.png)
+const snackItem = document.createElement("li");
+snackItem.textContent = "おやつ";
 
-<Answer>
+packingList.appendChild(snackItem);
 
-```js title="script.js"
-const strongElement = document.createElement("strong");
-strongElement.textContent = "Hello World!";
+const capItem = document.createElement("li");
+capItem.textContent = "帽子";
 
-const greetingElement = document.getElementById("greeting");
-greetingElement.appendChild(strongElement);
+packingList.appendChild(capItem);
 ```
 
-<ViewSource url={import.meta.url} path="_samples/hello-world-bold" />
+<ViewSource url={import.meta.url} path="_samples/add-element-exercise" />
 
 </Answer>