JS中forEach循环内调用appendChild仅追加最后一条数据如何解决

问题原因 #

• 单个组织容器<div class="org">的创建逻辑放在了forEach循环外部，全量循环全程只会复用同一个DOM节点
• 每次循环执行org.innerHTML = 模板内容时，都会直接覆盖这个节点上一次的内容
• 原生DOM的appendChild方法传入已存在的节点时，不会生成新副本，只会把原有节点移动到父容器的末尾，因此最终只会展示最后一次循环修改后的节点内容

修复方案 #

将单个组织节点的创建逻辑移动到forEach循环内部，每次循环都生成全新的DOM节点再追加到父容器中，修复后的代码如下：

function addOrgsToCard(Data) { 
  const orgs = document.getElementById("orgs");
  Data.forEach((organisation)=>{
    // 每次循环都创建新的组织节点
    const org = document.createElement("div");
    org.classList.add("org");
    org.innerHTML = `
    <div class="org">
    <img src="${organisation.avatar_url}" alt="" />
    <span>${organisation.login}</span>
    </div>
  `;
    console.log(organisation.login);
    orgs.appendChild(org);
  });
}

可选优化：当前代码里创建的外层div已经添加了org类，innerHTML里又嵌套了一层带org类的div，属于冗余结构，可以根据实际需求删掉其中一层。

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