时间戳

首页 > 解决方案 > 动态添加具有不同值的 DIV 元素

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
})

标签： javascript

解决方案

一种适用于您当前解决方案的简单方法是简单地在您的 id 后面附加索引或数字

例如

<!-- your html code becomes something like this -->
<h4 id="serverName1" class="my-0 font-weight-normal"></h4>
<h4 id="serverName2" class="my-0 font-weight-normal"></h4>
<h4 id="serverName3" class="my-0 font-weight-normal"></h4>

检索时，同样，附加索引

document.getElementById("serverName" + index).innerHTML = x.name

这样，您所有的 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>`;

推荐阅读