Javascript 动态添加具有不同值的DIV元素

我想根据API的结果动态创建一个具有不同值的div卡。目前，值一直相互覆盖，因为它们都共享相同的元素ID。有没有办法将所有值动态添加到它们自己的卡中

res.forEach(x => {
    const div = document.createElement("div");
    div.className = "card mb-4 box-shadow";
    div.innerHTML = `
        <div class="card-header">
           <h4 id="serverName" class="my-0 font-weight-normal"></h4>
        </div>
        <div class="card-body">
           <h1 id="serverPrice" class="card-title pricing-card-title"></h1>
           <p id="serverTraits" class="list-unstyled mt-3 mb-4"></p>
        </div>`

        document.getElementById("content").appendChild(div);
        document.getElementById("serverName").innerHTML = x.name
        document.getElementById("serverPrice").innerHTML = x.price + '$'
        document.getElementById("serverTraits").innerHTML = x.traits
})

res.forEach（x=>{
const div=document.createElement（“div”）；
div.className=“卡mb-4盒影”；
div.innerHTML=`

`
document.getElementById（“内容”）.appendChild（div）；
document.getElementById（“服务器名”）.innerHTML=x.name
document.getElementById（“serverPrice”）.innerHTML=x.price+“$”
document.getElementById（“serverTraits”）.innerHTML=x.traits
})

使用当前解决方案的一种简单方法是在ID后面添加索引或数字

e、 g

这样，您的所有ID都将是唯一的

编辑： 下面是一个如何在id后面追加数字的示例

innerHTML = `
    <div class="card-header">
       <h4 id="serverName` + 1 + `" class="my-0 font-weight-normal"></h4>
    </div>
    <div class="card-body">
       <h1 id="serverPrice" class="card-title pricing-card-title"></h1>
       <p id="serverTraits" class="list-unstyled mt-3 mb-4"></p>
    </div>`;

innerHTML=`

`;

为什么不在将内容附加到“content”元素之前动态生成内容

简单！没有

看看这个

div.innerHTML = `
    <div class="card-header">
       <h4 id="serverName" class="my-0 font-weight-normal">${x.name}</h4>
    </div>
    <div class="card-body">
       <h1 id="serverPrice" class="card-title pricing-card-title">${x.price}</h1>
       <p id="serverTraits" class="list-unstyled mt-3 mb-4">${x.traits}</p>
    </div>`
document.getElementById("content").appendChild(div);

div.innerHTML=`
${x.name}
${x.price}
${x.traits}
`
document.getElementById（“内容”）.appendChild（div）；

问题在于，我最初设置的innerHTML的ID名称设置为serverName&诸如此类。如何将索引附加到javascript中

div.innerHTML

中的innerHTML，在处理字符串时，可以使用+运算符连接字符串，例如将数字和字符串连接在一起。我用一个示例更新了我的答案，说明了如何在div.innerHTML中的“serverName”后面添加一个数字

innerHTML = `
    <div class="card-header">
       <h4 id="serverName` + 1 + `" class="my-0 font-weight-normal"></h4>
    </div>
    <div class="card-body">
       <h1 id="serverPrice" class="card-title pricing-card-title"></h1>
       <p id="serverTraits" class="list-unstyled mt-3 mb-4"></p>
    </div>`;

div.innerHTML = `
    <div class="card-header">
       <h4 id="serverName" class="my-0 font-weight-normal">${x.name}</h4>
    </div>
    <div class="card-body">
       <h1 id="serverPrice" class="card-title pricing-card-title">${x.price}</h1>
       <p id="serverTraits" class="list-unstyled mt-3 mb-4">${x.traits}</p>
    </div>`
document.getElementById("content").appendChild(div);