如何遍历HTML集合为每个元素添加动态元素并解决仅最后一项生效问题

根因说明 #

DOM节点属于引用类型，你遍历全程复用了同一个emptyDivDOM实例。DOM的appendChild方法有一个固有特性：如果待插入的节点已经存在于当前DOM树中，浏览器会先将该节点从原有父元素下移除，再插入到新的父元素位置。因此循环执行完成后，这个节点只会被挂载到最后一次遍历的元素上，也就是你观察到的仅最后一个元素有该节点的现象。

修复方案 #

你需要在每次循环的回调中创建全新的div节点实例，不要复用同一个emptyDiv。同时你已经通过Array.from将HTMLCollection转为了普通数组，无需再通过Array.prototype.map.call调用数组方法，遍历做DOM操作使用forEach更符合语义：

mainElem.forEach((tag, i) => {
    // 每次循环创建独立的新节点实例
    const emptyDiv = document.createElement('div');
    emptyDiv.classList.add(`dynamicClass_${i}`)
    if (i === 0) {
        emptyDiv.classList.add('dynamic_active_class');
    } else {
        emptyDiv.classList.add('dynamic_inactive_class');
    }
    tag.appendChild(emptyDiv);
})

如果你提前给全局的emptyDiv设置了很多通用属性不想重复编写，也可以用克隆节点的方式实现：

mainElem.forEach((tag, i) => {
    // 传入true表示深度克隆，会保留原有节点的所有属性和子节点
    const newEmptyDiv = emptyDiv.cloneNode(true);
    newEmptyDiv.classList.add(`dynamicClass_${i}`)
    if (i === 0) {
        newEmptyDiv.classList.add('dynamic_active_class');
    } else {
        newEmptyDiv.classList.add('dynamic_inactive_class');
    }
    tag.appendChild(newEmptyDiv);
})

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