レビュー反映 (一部保留)

aster-void · aster-void · commit 1fad898dc33d · 2023-11-02T12:23:59.000+09:00
diff --git a/docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html b/docs/1-trial-session/13-dom/_samples/change-shopping-memo/index.html
@@ -6,9 +6,9 @@
   </head>
   <body>
     <ul>
-      <li id="element1">トマト</li>
-      <li id="element2">ナス</li>
-      <li id="element3">バジル</li>
+      <li id="item1">トマト</li>
+      <li id="item2">ナス</li>
+      <li id="item3">バジル</li>
     </ul>
     <script src="script.js"></script>
   </body>
diff --git a/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js b/docs/1-trial-session/13-dom/_samples/fruit-basket/script.js
@@ -1,7 +1,7 @@
 const basket = document.getElementById("fruit-basket");
 const fruits = ["イチゴ", "スイカ", "バナナ"];
 
-for (const fruit of basket) {
+for (const fruit of fruits) {
   const item = document.createElement("li");
   item.textContent = fruit;
   basket.appendChild(item);
diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md
@@ -50,19 +50,14 @@ element.style.backgroundColor = "red";
 
 ## DOM を用いて要素を追加する
 
-`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。
-ただ、そのままだと `textContent` が設定されていない (空文字列) ので、画面には何も表示されません。
-`textContent` を `Hello World!` に設定してみましょう。
+`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。中身のない空の要素が作成されるので、`textContent` を `Hello World!` に設定してみましょう。
 
 ```js
 const newElement = document.createElement("div");
 newElement.textContent = "Hello World!";
 ```
 
-しかし、新しく作った要素が画面に表示されていません。
-これは、作成した要素が画面に表示されている HTML のどこにも追加されていないからです。
-
-`要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加することができます。
+そして、`要素1.appendChild(要素2)` とすることで、要素2を要素1の子要素に追加し、画面に表示することができます。
 今回は、div 要素の子要素にしてみましょう。
 
 ```html
@@ -74,11 +69,11 @@ const parent = document.getElementById("div-element");
 
 const newElement = document.createElement("div");
 newElement.textContent = "Hello World!";
+
 parent.appendChild(newElement);
 ```
 
 これで、画面に `Hello World!` と表示されたはずです。
-`div` 要素以外にも、ほとんどの要素の子要素にすることができます。
 
 ## 初級課題
 
@@ -88,18 +83,18 @@ parent.appendChild(newElement);
 
 ```html title="index.html"
 <ul>
-  <li id="tomato">トマト</li>
-  <li id="eggplant">ナス</li>
-  <li id="basil">バジル</li>
+  <li id="item1">トマト</li>
+  <li id="item2">ナス</li>
+  <li id="item3">バジル</li>
 </ul>
 ```
 
 <Answer title="買い物リストの書き換え">
 
 ```js title="script.js"
-const element = document.getElementById("eggplant");
+const targetItem = document.getElementById("item2");
 
-element.textContent = "レモン";
+targetItem.textContent = "レモン";
 ```
 
 <ViewSource url={import.meta.url} path="_samples/change-shopping-memo" />
@@ -120,7 +115,6 @@ const fruits = ["イチゴ", "スイカ", "バナナ"];
 
 ```html title="index.html"
 <ul id="fruit-basket"></ul>
-<script src="script.js"></script>
 ```
 
 <Answer title="フルーツバスケット">
