如何使用HTML template元素渲染对象数组？仅最后一项生效如何解决

• 你在循环外仅执行了1次模板克隆操作，全程只操作同一个listElement DOM节点
• 调用append()方法传入已存在于DOM树中的节点时，浏览器只会将该节点移动到新的父节点位置，不会自动创建副本
• 整个循环全程都在覆盖修改同一个节点的文本内容，最后一次修改的结果就是页面最终展示的效果，因此只会显示数组最后一个对象的内容

把模板克隆、获取列表项的逻辑移到forEach循环内部，每次遍历数组都生成一个全新的DOM节点实例，修改完成后再追加到容器中。

修正后的JS代码如下：

let array = [
    {
        city: 'Rome',
        country: 'Italy'
    },
    {
        city: 'Moscow',
        country: 'Russia'
    }
];

const template = document.querySelector('#template');
const lists = document.querySelector('.lists');

array.forEach(i => {
    // 每次循环都克隆一份全新的模板内容
    const clone = template.content.cloneNode(true);
    const listElement = clone.querySelector('.template-list');
    listElement.querySelector('.template-city').textContent = i.city;
    listElement.querySelector('.template-country').textContent = i.country;
    lists.append(listElement);
})

你之前使用createElement可以正常运行，就是因为每次循环都会调用createElement生成新的DOM节点，不存在复用同一个节点的问题，和上述修正后的逻辑本质一致。

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