JS中backgroundColor设置异常：部分卡片div无法获取随机颜色求助

尝试为每个卡片（div元素）分配随机背景色，但部分卡片未显示颜色。相关代码如下：

document.addEventListener('DOMContentLoaded', () => {
    function generateRandomColor() {
        var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
        return randomColor;

    }
    var grid = document.querySelector(".grid");

    for (var i = 0; i < 50; i++) {
        grid.innerHTML += '<div class="card" ></div>';
       
        var cards = document.querySelectorAll(".card");
      
        cards[i].style.backgroundColor = generateRandomColor();
      
    }
});

当前效果：部分卡片显示随机背景色，其余卡片无背景色呈现空白。

每次循环执行grid.innerHTML += '<div class="card"></div>'时，浏览器会重新解析并渲染整个.grid容器的内容——之前已创建并设置过背景色的卡片会被销毁后重新创建，之前的样式随之丢失。

同时，每次循环都调用document.querySelectorAll(".card")获取卡片，尽管当前循环给cards[i]设置了样式，但下一次循环更新innerHTML后，这些元素会被替换，导致前面卡片的样式被重置，最终只有最后几次循环的卡片能保留样式。

方案一：一次性拼接HTML再插入，统一设置样式 #

先拼接所有卡片的HTML字符串，一次性插入到grid中，再批量设置背景色，避免多次DOM渲染：

document.addEventListener('DOMContentLoaded', () => {
    function generateRandomColor() {
        return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }
    const grid = document.querySelector(".grid");
    // 拼接所有卡片HTML
    let cardsHTML = '';
    for (let i = 0; i < 50; i++) {
        cardsHTML += '<div class="card"></div>';
    }
    grid.innerHTML = cardsHTML;
    // 统一设置每个卡片的背景色
    const cards = document.querySelectorAll(".card");
    cards.forEach(card => {
        card.style.backgroundColor = generateRandomColor();
    });
});

方案二：使用createElement创建元素（推荐） #

直接创建单个div元素，设置好背景色后再添加到grid，完全避免innerHTML导致的DOM重新渲染问题，性能更优：

document.addEventListener('DOMContentLoaded', () => {
    function generateRandomColor() {
        return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }
    const grid = document.querySelector(".grid");
    for (let i = 0; i < 50; i++) {
        const card = document.createElement('div');
        card.classList.add('card');
        card.style.backgroundColor = generateRandomColor();
        grid.appendChild(card);
    }
});

内容的提问来源于stack exchange，提问作者ארי פיין