咨询如何通过JS根据JSON列表长度动态生成对应数量的卡片div

你查到的动态追加元素是完全可行的方案，也是这类列表渲染需求的常规实现方式，只需要调整3处代码即可实现需求：

注意：HTML 中 id 必须全局唯一，所以原来写死的 id="card"、id="friendly" 这类选择器都要改成类选择器，避免重复 id 导致的样式异常和 DOM 选择错误。

1. 修改CSS（把id选择器替换为类选择器） #

.card {
    font-family: 'Roboto', sans-serif;
    vertical-align:top;
    border-radius:25px;
    background-color:white;
    box-shadow: 0 4px 8px 0 #0000002a, 0 6px 20px 0 #0000002a;
    position:relative;
    line-height:8px;
    height:150px;
    padding-left:150px; /* 左侧预留图标位置 */
    margin-bottom: 20px; /* 多个卡片之间加间距 */
}

.friendly {
    font-size:40px;
    padding-top:30px;
    line-height:0px
}
.model {
    opacity:40%;
    line-height:0px;
    padding-bottom:4px;
}
.type,.tech,.software {
    display:inline
}

2. 修改HTML（移除写死的卡片，仅保留卡片容器） #

<!-- 所有动态生成的卡片都会自动插入到这个容器中 -->
<div id="card-container"></div>

3. 修改JS代码（遍历JSON动态生成卡片并追加） #

var jsonList = 
{
    "first": {
        "Friendly": "Nest Mini (2nd gen)",
        "Model": "Google Nest Mini (2nd Generation)",
        "Manufacturer": "Google",
        "Type": "speaker",
        "Tech": [
            "wifi"
        ],
        "Software": [
            "Google Home"
        ]
    },
    // 后续新增的second、third等条目会自动被遍历生成卡片
    "second": {
        "Friendly": "测试设备",
        "Model": "测试型号 v1.0",
        "Manufacturer": "测试厂商",
        "Type": "sensor",
        "Tech": [
            "bluetooth"
        ],
        "Software": [
            "测试控制APP"
        ]
    }
};

// 获取卡片容器节点
const cardContainer = document.getElementById('card-container');

// 遍历jsonList的所有设备条目
for (const deviceKey in jsonList) {
    const device = jsonList[deviceKey];
    // 组装单个卡片的HTML结构
    const cardHtml = `
    <div class="card">
        <p class="friendly">${device.Friendly}</p>
        <p class="model">${device.Model}</p>
        <p>Made by <span class="manufacturer">${device.Manufacturer}</span></p>
        <p class="type">${device.Type}</p>
        <p class="tech">${device.Tech.join(', ')}</p> 
        <p class="software">${device.Software.join(', ')}</p>
    </div>
    `;
    // 把生成的卡片追加到容器末尾
    cardContainer.insertAdjacentHTML('beforeend', cardHtml);
}

代码说明：join(', ') 是把 Tech、Software 这类数组转成逗号分隔的字符串，比直接输出数组格式更友好，不需要该效果可以删掉，直接使用变量本身即可。

后续你只需往 jsonList 中新增设备条目，页面刷新后就会自动生成对应数量的卡片，无需修改其他逻辑代码。

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