求助：forEach循环仅向首个创建的div追加内容的问题排查

我在通过forEach循环处理API返回的结果集时，想要为每个结果创建一个独立的div元素，并在其中追加对应的HTML内容，但实际所有内容都只加到了第一个创建的div里。怎么才能让每组文本对应到各自独立的div中？

代码示例 #

app.displayResults = (arrayOfObjects) => {
  arrayOfObjects.forEach((Object) =>{
    
    const number = Object.house_number;
    const address = Object.street_name;
    const zipCode = Object.zip_code;
    const borough = Object.borough;
    const date = Object.inspection_date;
    const initial = Object.inspection_type;
    const iResult = Object.result;
  
    const resultContainer = document.createElement("div");
    resultContainer.classList.add('resultContainer');
    document.querySelector('.inspectionResults').append(resultContainer); 
    
    const innerHTML = `
    <p class = "recordDetails"> ADDRESS: ${number}${address}</p>
    <p class = "recordDetails"> DATE: ${date}</p>
    <p class = "recordDetails"> BOROUGH: ${borough}</p>`

    const record = document.createElement("div");
    record.classList.add('record');
    record.innerHTML = `${innerHTML}`

    document.querySelector(".resultContainer").append(record)
  })
}

错误原因 #

问题出在两处：

1. 最后一行的document.querySelector(".resultContainer").append(record)：document.querySelector()只会返回DOM中第一个匹配该选择器的元素，所以每次循环时，你都把新创建的record追加到了第一次循环生成的resultContainer里，而非当前循环刚创建的那个容器。
2. innerHTML里用了转义字符<，这会导致渲染出来的是纯文本而非<p>标签，无法正常解析为HTML元素。

修正后的代码 #

app.displayResults = (arrayOfObjects) => {
  arrayOfObjects.forEach((obj) =>{ // 避免用内置构造函数Object做变量名，改成obj更规范
    
    const number = obj.house_number;
    const address = obj.street_name;
    const zipCode = obj.zip_code;
    const borough = obj.borough;
    const date = obj.inspection_date;
    const initial = obj.inspection_type;
    const iResult = obj.result;
  
    const resultContainer = document.createElement("div");
    resultContainer.classList.add('resultContainer');
    document.querySelector('.inspectionResults').append(resultContainer); 
    
    // 替换转义字符为正常HTML标签，确保能解析为p元素
    const innerHTML = `
    <p class="recordDetails"> ADDRESS: ${number}${address}</p>
    <p class="recordDetails"> DATE: ${date}</p>
    <p class="recordDetails"> BOROUGH: ${borough}</p>`

    const record = document.createElement("div");
    record.classList.add('record');
    record.innerHTML = innerHTML;

    // 直接引用当前循环创建的resultContainer，无需重新查询DOM
    resultContainer.append(record);
  })
}

额外优化建议 #

• 避免使用JavaScript内置构造函数（如Object）作为变量名，防止覆盖全局对象，语义化命名更易维护。
• 如果数据量较大，可以先创建文档片段(DocumentFragment)，批量插入DOM，减少重排重绘次数，提升性能。

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