JavascriptでHTMLの生成と、取得データの表示について

##fetchメソッドで取得した複数のデータ(img, id, title)を代入するHTMLを複数個生成したい。

以下のHTML<div class="card">~~~</div>をJavascriptで複数個（今回は５個）生成し、fetchで取得した（img, id, title）をそれぞれ（id="img", id="id", id="title"）に代入したいのですが、現状以下のコーディングだと、最終要素（５個目）しか取得できません。

各HTMLに各データ(img, id, title)を代入するにはどのように考えたら良いのでしょうか？
const html = "<div class="card">~~~</div>";
を書きHTML要素を５つ生成することはできはしたんですが、正しいやり方とも思えず、各要素に対応したデータを代入できずで困っています。

どなたかご享受お願いいたします。

html
1    <div id="cards">
2        <div class="card">
3            <div class="img__wrapper">
4                <img src="" alt="" id="img">
5            </div>
6            <div class="body">
7                <p id="id"></p>
8                <p id="text"></p>
9            </div>
10        </div>

javascript
1const img = document.getElementById('img');
2const id = document.getElementById('id');
3const title = document.getElementById('title');
4
5document.addEventListener("DOMContentLoaded", async function () {
6    // alert(1);
7    const res = await fetch('https://jsonplaceholder.typicode.com/photos');
8    console.log(res);
9    const datas = await res.json();
10    console.log(datas);
11
12    datas.forEach(function (data, index) {
13        if (data.id <= 5) {
14            img.src = data.thumbnailUrl;
15            id.textContent = data.id;
16            title.textContent = data.title;
17        }
18    })
19})

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

回答1件

ベストアンサー

例を書いてみました。
参考になると思います。

Javascript
1const img = document.getElementById("img");
2const id = document.getElementById("id");
3const title = document.getElementById("title");
4
5document.addEventListener("DOMContentLoaded", async function () {
6    // alert(1);
7    const res = await fetch("https://jsonplaceholder.typicode.com/photos");
8    console.log(res);
9    const datas = await res.json();
10    console.log(datas);
11
12    const point = document.getElementById("cards");
13    const target_node = point.querySelector("div.card");
14
15    //datas.slice(0,5)で最初から５つ配列を取り出します。
16    datas.slice(0, 5).forEach(function (data, index) {
17        //div.cardを複製
18        let clone_node = target_node.cloneNode(true);
19
20        //複製したdiv.cardからサムネイルを表示するimgノードを取得
21        let image_node = clone_node.querySelector(".img__wrapper img");
22        image_node.id = "img-" + data.id;
23        image_node.src = data.thumbnailUrl;
24        image_node.alt = data.title;
25
26        //複製したdiv.cardからidを表示するpノードを取得
27        let id_node = clone_node.querySelector("#id");
28        id_node.id = "id-" + data.id;
29        id_node.textContent = data.id;
30
31        //複製したdiv.cardからタイトルを表示するpノードを取得
32        let text_node = clone_node.querySelector("#text");
33        text_node.id = "text-" + data.id;
34        text_node.textContent = data.title;
35
36        //複製したdiv.cardを#cardsに追加する
37        point.appendChild(clone_node);
38    });
39});

下はHTML全体になります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8" />
5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6        <title>Document</title>
7        <script>
8            const img = document.getElementById("img");
9            const id = document.getElementById("id");
10            const title = document.getElementById("title");
11
12            document.addEventListener("DOMContentLoaded", async function () {
13                // alert(1);
14                const res = await fetch("https://jsonplaceholder.typicode.com/photos");
15                console.log(res);
16                const datas = await res.json();
17                console.log(datas);
18
19                const point = document.getElementById("cards");
20                const target_node = point.querySelector("div.card");
21
22                //datas.slice(0,5)で最初から５つ配列を取り出します。
23                datas.slice(0, 5).forEach(function (data, index) {
24                    //div.cardを複製
25                    let clone_node = target_node.cloneNode(true);
26
27                    //複製したdiv.cardからサムネイルを表示するimgノードを取得
28                    let image_node = clone_node.querySelector(".img__wrapper img");
29                    image_node.id = "img-" + data.id;
30                    image_node.src = data.thumbnailUrl;
31                    image_node.alt = data.title;
32
33                    //複製したdiv.cardからidを表示するpノードを取得
34                    let id_node = clone_node.querySelector("#id");
35                    id_node.id = "id-" + data.id;
36                    id_node.textContent = data.id;
37
38                    //複製したdiv.cardからタイトルを表示するpノードを取得
39                    let text_node = clone_node.querySelector("#text");
40                    text_node.id = "text-" + data.id;
41                    text_node.textContent = data.title;
42
43                    //複製したdiv.cardを#cardsに追加する
44                    point.appendChild(clone_node);
45                });
46            });
47        </script>
48    </head>
49    <body>
50        <div id="cards">
51            <div class="card">
52                <div class="img__wrapper">
53                    <img src=" " alt="" id="img" />
54                </div>
55                <div class="body">
56                    <p id="id"></p>
57                    <p id="text"></p>
58                </div>
59            </div>
60        </div>
61    </body>
62</html>
63