teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

説明追記

2020/04/09 23:34

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -7,4 +7,25 @@
7
7
  }
8
8
  console.log(div);
9
9
  //"<div><div>要素1</div><div>要素2</div><div>要素3</div></div>"
10
- ```
10
+ ```
11
+
12
+ ```js
13
+ for (let i = 1; i <= 3; i++) {
14
+ const div1 = document.createElement('div');
15
+ div1.textContent = "要素" + i;
16
+ document.body.appendChild(div1);
17
+ }
18
+ ```
19
+
20
+ ```js
21
+ document.body.innerHTML = "<div>要素1</div><div>要素2</div><div>要素3</div>";
22
+ ```
23
+
24
+ > [ドキュメントオブジェクトモデル (DOM) - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)
25
+ > DOM のモデルは文書を論理的なツリーで表現します。ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。
26
+
27
+ 上記が理解できれば、
28
+ `<div>要素1</div><div>要素2</div><div>要素3</div>`
29
+ はDOMではなく、単なるノードの集合ということも分かると思います。(ツリーになっていない)
30
+
31
+ 結局、最終的に何をしたいのかを書かないと質問として意味がないです。