JavaScript使用innerHTML动态渲染卡片逐行显示问题排查

你遇到的网格布局失效问题是两个常见错误共同导致的：

• 直接使用innerHTML +=逐次插入DOM：每次操作都会触发浏览器重新序列化、解析整个容器的DOM结构，多次操作容易破坏栅格布局的依赖关系，同时性能也极低
• 未遵循Bootstrap栅格规则：Bootstrap要求所有col-*类元素必须是带row类元素的直接子元素，否则栅格的浮动、弹性盒规则不会生效
• 额外补充：使用for...in遍历数组会有遍历到原型属性、索引格式异常的风险，数组遍历优先使用for...of

步骤1：调整HTML容器结构 #

确保你的根容器符合Bootstrap栅格要求：

<div class="container">
  <!-- 给root添加row类，作为所有col的直接父元素 -->
  <div id="root" class="row"></div>
</div>

步骤2：修改渲染逻辑 #

先拼接所有卡片的HTML字符串，最后一次性插入DOM，避免多次操作innerHTML：

const deploySnipCard = (getSnip) => {
    let allCardHtml = ''
    // 改用for...of遍历数组
    for (const item of getSnip) {
        const tech = item.tech;
        const tags = item.tags;
        const tagsUrl = item.tagsUrl;
        const status = item.status;
        const imgSrc = item.imgSrc;
        const imgUrl = item.imgUrl;
        const caption = item.caption;
        allCardHtml += getSingleCardHtml(tech, tags, tagsUrl, status, imgSrc, imgUrl, caption);
    }
    // 仅操作一次DOM完成全部渲染
    document.getElementById("root").innerHTML = allCardHtml
};

const getSingleCardHtml = (tech, tags, tagsUrl, status, imgSrc, imgUrl, caption) => {
    return `
    <div class="col-12 col-lg-4 col-md-6">
        <div class="snip-card mt-5 p-2">
            <div class="d-flex justify-content-between">
                <div>
                    <span class="badge bg-primary mb-2">${tech}</span>
                    <a href="${tagsUrl}">
                    <span class="badge bg-danger mb-2 mx-1">${tags}</span></a>
                </div>
                <div>
                    <span class="badge bg-success mb-2">${status}</span>
                </div>
            </div>
            <a href="${imgUrl}">
                <div class="bg-dark">
                    <img class="card-img img-fluid" alt="click here" loading="lazy"
                        src="${imgSrc}">
                </div>
            </a>
            <p class="snip-card-cap my-2">${caption}</p>
        </div>
    </div>`
}

实际错误效果 #

预期正确效果 #

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