根据API结果动态生成DIV卡片 元素ID重复覆盖值如何生成独立卡片

问题根源 #

按照HTML规范，页面上的元素ID必须全局唯一。你现在的写法里，每轮循环创建的卡片，内部子元素都硬编码了一模一样的ID，加上你用全局方法document.getElementById()找元素——这个方法永远只会返回页面里第一个匹配到对应ID的DOM节点，结果就是所有循环的赋值操作，全堆到第一张生成的卡片上，后面创建的卡片根本找不到对应的内部节点，自然就出现数值互相覆盖的问题。

修正思路 #

动态渲染重复结构的卡片时，根本没必要给内部子元素写固定ID。ID本来就是给全局唯一的特殊元素设计的，同结构批量复用的元素，用类名做标识才是对的用法。所有内部元素的查找，都要限制在当前循环生成的卡片的DOM子树范围里，别用全局文档级别的查找方法，就能从根源上避免不同卡片之间的元素干扰。

改完能直接用的代码

const container = document.getElementById("content");
res.forEach(x => {
    const card = document.createElement("div");
    card.className = "card mb-4 box-shadow";
    // 去掉子元素上的重复ID，换成类名标识
    card.innerHTML = `
        <div class="card-header">
           <h4 class="server-name my-0 font-weight-normal"></h4>
        </div>
        <div class="card-body">
           <h1 class="server-price card-title pricing-card-title"></h1>
           <p class="server-traits list-unstyled mt-3 mb-4"></p>
        </div>`;
    // 基于当前新建的卡片节点找内部元素，查找范围完全隔离
    card.querySelector(".server-name").textContent = x.name;
    card.querySelector(".server-price").textContent = `${x.price}$`;
    card.querySelector(".server-traits").textContent = x.traits;
    // 最后把填好值的卡片插到容器里
    container.appendChild(card);
})

避坑提醒 #

• 别图省事给ID加动态后缀凑唯一值（比如serverName_0/serverName_1），这种写法虽然能跑，但会让DOM带上一堆毫无意义的属性，后续维护找元素反而绕弯路。
• 塞纯文本的时候优先用textContent代替innerHTML，既能防XSS注入，性能也更好。
• 原代码是把卡片插到页面之后再找元素赋值，其实可以先在内存里把所有值填完，最后再一次性插入容器，还能减少页面重排重绘的开销。

内容的提问来源于stack exchange，提问作者mendy