如何让动态生成的HTML元素对应每条客户数据？

我需要为多条数据创建HTML元素，使用document.getElementById("div-1").appendChild(container)方法生成对应元素后，所有元素都只显示最后一条数据的信息，如何让每个元素匹配各自的客户数据？

附上我的代码：

customer.js 代码 #

datas.forEach(function (data) {
       
    var rptContainer = document.querySelector('.container').cloneNode(true);
        
    rptContainer.querySelector('.customer-no').textContent = data.customerNo;
    rptContainer.querySelector('.customer-name').textContent = data.customerName;

    document.getElementById("div-1").appendChild(rptContainer);
});

HTML 文件代码 #

<html>
 <body>
  <div id="div-1">
   <div class="container">
     <div class="page-header" style="text-align: center">
        <div class="pageContent">
            <table class="table-customer-info">
                <tr>
                    <td colspan="1"><span class="font-weight-bold">Customer No:</span></td>
                    <td colspan="1"><span class="customer-no"></span></td>
                    <td colspan="1"><span class="font-weight-bold">Customer Name:</span></td>
                    <td colspan="1"><span class="customer-name"></span></td>
                </tr>
             </table>
           </div>
         </div>
      </div>
    </div>
  <script src="customer.js?v=24"></script>
  </body>
</html>

原因1：克隆的不是原始空模板，而是页面中已修改过的容器 #

你的原始模板容器（.container）在div-1内部，每次循环克隆后都会把新容器添加到div-1中。若后续操作误修改了原始模板内容，或克隆逻辑匹配到已修改的容器，就会导致所有新容器继承最后一次修改的内容。

解决步骤：

1. 将原始模板移到div-1外部并隐藏，避免被误修改或重复渲染
2. 克隆时指定只克隆这个隐藏的模板

修改后的HTML：

<html>
 <body>
  <div id="div-1"></div>
  <!-- 作为模板的容器，隐藏不显示 -->
  <div class="container template" style="display: none">
     <div class="page-header" style="text-align: center">
        <div class="pageContent">
            <table class="table-customer-info">
                <tr>
                    <td colspan="1"><span class="font-weight-bold">Customer No:</span></td>
                    <td colspan="1"><span class="customer-no"></span></td>
                    <td colspan="1"><span class="font-weight-bold">Customer Name:</span></td>
                    <td colspan="1"><span class="customer-name"></span></td>
                </tr>
             </table>
           </div>
         </div>
      </div>
  <script src="customer.js?v=24"></script>
  </body>
</html>

修改后的customer.js：

datas.forEach(function (data) {
    // 克隆隐藏的模板容器
    var rptContainer = document.querySelector('.container.template').cloneNode(true);
    // 移除模板类并显示容器
    rptContainer.classList.remove('template');
    rptContainer.style.display = 'block';
    
    // 给克隆的容器赋值
    rptContainer.querySelector('.customer-no').textContent = data.customerNo;
    rptContainer.querySelector('.customer-name').textContent = data.customerName;

    document.getElementById("div-1").appendChild(rptContainer);
});

原因2：数据数组中所有元素都是同一个对象的引用 #

如果datas数组是通过重复添加同一个对象生成的（比如循环中修改同一个对象属性再push），数组内所有元素会指向同一个内存地址，最终所有容器都会显示最后一次修改的属性值。

解决步骤：
确保每个数据项都是独立对象，生成数据时每次创建新对象：

// 错误示例：重复添加同一个对象
var datas = [];
var tempObj = {};
for (var i = 0; i < 5; i++) {
    tempObj.customerNo = i + 1;
    tempObj.customerName = "Customer " + (i + 1);
    datas.push(tempObj); // 所有元素都是同一个tempObj的引用
}

// 正确示例：每次创建新对象
var datas = [];
for (var i = 0; i < 5; i++) {
    datas.push({
        customerNo: i + 1,
        customerName: "Customer " + (i + 1)
    });
}

额外检查 #

确认代码中rptContainer与querySelector之间无多余空格（比如rptContainer .querySelector是语法错误，会导致未定义报错），若有直接删除即可。

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