JavaScript代码else分支中img.src赋值控制台正常但DOM节点不生效问题咨询

问题根源 #

你只创建了一个img DOM元素实例（代码开头的var img = document.createElement('img');），在else分支的forEach循环中，反复修改这个单例的src和id属性——每一次循环都会直接覆盖上一次的赋值。控制台打印的是每次赋值后的即时值，但DOM中最终只会保留最后一次循环的修改结果，这就导致你误以为index=2时的src未同步到DOM，实际是前面的修改被覆盖，且单例元素无法满足你生成多个图片的需求。

修复代码 #

将创建img元素的逻辑放到循环内部，每次迭代生成新的独立img实例：

let randIndex;
if (usedImages.length < gameData.length) {
    do {
        randIndex = Math.floor(Math.random() * gameData.length);
    } while (usedImages.includes(randIndex));
    usedImages.push(randIndex);
    const img = document.createElement('img');
    img.src = gameData[randIndex].url;
    img.id = 'card-i-' + gameData[randIndex].key;
    imageIds.push('card-i-' + gameData[randIndex].key);
    // 根据实际需求将元素添加到DOM，示例：
    // document.getElementById('target-container').appendChild(img);
} else {
    [0,1,2].forEach(index=>{
        if (usedImages.filter(value => value === index).length < 2) {
            const img = document.createElement('img'); // 每次循环创建新实例
            img.src = gameData[index].url;
            console.log('here created',gameData[index].url)
            usedImages.push(index);
            img.id = 'card-i-' + gameData[index].key;
            imageIds.push('card-i-' + gameData[index].key);
            // 将新元素添加到DOM
            // document.getElementById('target-container').appendChild(img);
        }
    })
}

补充说明 #

• 原写法复用同一个img元素，后续赋值会直接覆盖之前的属性，若仅将该元素添加到DOM一次，页面只会显示最后一次循环的结果。
• 若需生成多个独立的图片卡片，必须在每次需要新元素时调用document.createElement('img')，不能复用同一个实例。
• 注意完成属性赋值后，要将新创建的img元素添加到DOM树中（通过appendChild等方法），否则元素不会显示在页面上。

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