JavaScript for循环结合<template>遍历数组仅生成单个子元素的问题解决

• 模板克隆逻辑位于循环外部，仅生成1份模板实例，循环全程修改同一个DOM片段的文本内容，未生成独立的新节点
• 误使用document.createElement()：该方法仅支持传入标签名创建新元素，无法将已有DOM片段挂载到页面，代码未将生成的节点插入#trackerCont容器
• 循环变量i未显式声明，会污染全局作用域（次要问题）
• 赋值时直接覆盖模板文本，会丢失原有HP 、AP 的前缀文字

每次循环执行以下操作：

1. 从<template>标签内克隆一份全新的DOM片段，保证每个战斗单位对应独立节点
2. 为当前克隆的节点绑定对应数组项的文本数据，保留原有前缀
3. 通过appendChild()将赋值完成的节点插入#trackerCont容器

var trackerArray = [
    {Name: "Joe Brown", HP: 100, AP: 30},
    {Name: "Steve Smith", HP: 100, AP: 30},
    {Name: "Jane", HP: 100, AP: 30}
]

function buildTracker() {
    const trackerContainer = document.getElementById('trackerCont');
    const template = document.getElementById('tracktemp');
    // 可选：多次调用时先清空容器，避免重复生成节点
    trackerContainer.innerHTML = '';

    for (let i = 0; i < trackerArray.length; i++) {
        const combatant = trackerArray[i];
        // 每次循环都克隆独立的模板片段
        const trackItemTemp = template.content.cloneNode(true);
        // 绑定对应数据，保留原有前缀
        trackItemTemp.querySelector('.itemNameText').innerText = combatant.Name;
        trackItemTemp.querySelector('.itemHpText').innerText = `HP ${combatant.HP}`;
        trackItemTemp.querySelector('.itemApText').innerText = `AP ${combatant.AP}`;
        // 将节点插入目标容器
        trackerContainer.appendChild(trackItemTemp);
    }
}

// 调用方法触发首次渲染
buildTracker();

• <template>的content属性返回DocumentFragment类型，该类型节点可直接通过appendChild插入页面，无需额外包装
• 用let声明循环变量、const声明固定元素，避免变量污染
• 渲染前清空容器的操作适合多次调用buildTracker的场景，比如数组更新后重新渲染

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