为何两段JavaScript追加DOM元素代码执行效果不同？

嘿，我来帮你搞清楚这个问题！你遇到的情况其实是DOM元素的复用规则在搞鬼～

先看第一段代码的问题 #

var blackjackRandom=Math.floor(Math.random()*52); 
var imageElement=document.createElement('img'); 
imageElement.src=`static/images/cards/card (${blackjackRandom}).png`; 
imageElement.style='height:200px'; 
imageElement.id='image__id'; 
for(i=0;i<3;i++){ 
    var image=document.getElementsByClassName(`${value}__image`)[0]; 
    image.appendChild(imageElement); 
}

这里你只创建了一个<img>元素对象，然后在循环里三次调用appendChild(imageElement)。但DOM有个核心规则：一个元素对象只能存在于DOM树的一个位置。每次调用appendChild时，如果这个元素已经在DOM中，它会被从原来的位置移除，再添加到目标容器里。所以三次循环下来，你只是把同一个图片元素反复移动，最终页面上只会显示这1个图片。

再看第二段代码的正确逻辑 #

for(i=0;i<3;i++){ 
    var blackjackRandom=Math.floor(Math.random()*52); 
    var imageElement=document.createElement('img'); 
    imageElement.src=`static/images/cards/card (${blackjackRandom}).png`; 
    imageElement.style='height:200px'; 
    imageElement.id='image__id'; 
    document.getElementsByClassName(`${value}__image`)[0].appendChild(imageElement); 
}

这里你把document.createElement('img')放在了循环内部，每次循环都会生成一个全新的<img>元素对象。这三个是完全独立的DOM节点，不存在复用的问题，所以每次appendChild都是把新的图片添加到容器里，自然就能看到3个图片了。

关于控制台显示的小误区 #

你说控制台显示两段代码都有3个元素，大概率是你查看的是循环执行次数或者变量的临时计数，但实际上DOM树里真正存在的元素数量是不同的。你可以通过document.querySelectorAll('.${value}__image img').length来查看容器内的图片数量，第一段会返回1，第二段返回3。另外提一句：第二段里重复设置id='image__id'是不符合HTML规范的，id必须是页面唯一的，建议改成用class或者动态生成唯一id哦。

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