DOMで文字列をリスト表示(?)させたい

前提・実現したいこと

htmlファイルは変更せずに以下の画像のようなwebページの表示にしたいです。

jsファイルに記述した３つの文字列を上の画像のように３つ全て表示し、リスト表示(?)させたいです。

(JavaScript学習を始めたばかりの超初心者です。質問の際、単語や理解が間違っているかもしれませんが、どうかご容赦ください。)

発生している問題・エラーメッセージ

私のJavaScriptだとこのように表示されてしまいます。

該当のソースコード

JavaScript
1window.onload = Main;
2
3function Main() {
4  let list = document.getElementById("itemList");
5  list.innerHTML = "First item";
6  list.innerHTML = "Second item";
7  list.innerHTML = "Third item";
8}
9

↓は変更しない

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF8" />
6  <title>JavaScript Test</title>
7  <script src="~~.js"></script>
8</head>
9
10<body>
11  <div id="itemList"></div>
12</body>
13
14</html>
15

試したこと

調べてぼんやりと分かったのは「 innerHTML = " " 」を記述するたびに要素が書き換えられて３つ目の「 "Third item" 」のみが表示されているのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScript
1
2window.onload = Main;
3
4function Main() {
5  let list = document.getElementById("itemList");
6  list.innerHTML += "First item";
7  list.innerHTML += "Second item";
8  list.innerHTML += "Third item";
9}
10

投稿2020/06/14 16:52

kyoya0819

総合スコア10429

Alex_M

2020/06/14 17:20

回答ありがとうございます。 listに+していくと文字列を足していけるのですね。しかし私が実現させたいのは「前提・実現させたいこと」に貼ったようなリスト表示のようなやり方です(TT)

kyoya0819

2020/06/14 17:22

まずは、リスト部分のみ、完成予想通りのHTMLを書いてみてください。

Alex_M

2020/06/14 18:13 編集

let list = document.getElementById("itemList"); 以下を list.innerHTML = "<ul><li>First item</li><li>Second item</li><li>Third item</li></ul>"; と書くことで達成できました！回答ありがとうございました！

kyoya0819

2020/06/14 18:13 編集

liタグの親タグとして適切なものはなにタグかご存知でしょうか？

Alex_M

2020/06/14 18:17

訂正いたしました???? 基礎的な質問失礼いたしました。

行動規範の内容に同意します

JavaScript
1window.onload = Main;
2
3function Main() {
4
5  let list = document.getElementById("itemList");
6
7  list.innerHTML = "<ul><li>First item</li><li>Second item</li><li>Third item</li></ul>";
8}
9