如何使用JavaScript更简便地实现HTML结构重复渲染？

优化实现方案 #

方案1：模板字符串拼接（最简便，适合内部可控数据场景） #

直接通过ES6模板字符串拼接HTML结构，一次性插入到容器中，代码量大幅缩减，可读性更高：

const dishes = [
    {
        id: "tbb",
        filename: "burger.png",
        dishname: "Triplo bacon burger",
        author: "Jorge Relato"
    },
    {
        id: "p4e",
        filename: "pizza.png",
        dishname: "Pizza 4 estações",
        author: "Fabiana Melo"
    }
]

document.querySelector('.cards').innerHTML = dishes.map(dish => `
    <div class="card" id="${dish.id}">
        <div class="card__image-container">
            <img src="foodassets/${dish.filename}" alt="${dish.id}">
        </div>
        <div class="card__content">
            <p>${dish.dishname}</p>
        </div>
        <div class="card__info">
            <p>por ${dish.author}</p>
        </div>
    </div>
`).join('')

注意：如果dishes数组中的数据来源于用户输入/第三方不可信源，需要先对字段做XSS转义处理，避免注入风险。

方案2：原生<template>标签实现（更安全，适合动态数据场景） #

如果需要更高的安全性，也可以用HTML原生的模板标签实现，避免手动拼接字符串的注入风险：
首先在HTML中定义模板：

<template id="cardTemplate">
    <div class="card">
        <div class="card__image-container">
            <img alt="">
        </div>
        <div class="card__content">
            <p></p>
        </div>
        <div class="card__info">
            <p></p>
        </div>
    </div>
</template>

然后JS逻辑：

const dishes = [/* 原有数组内容 */]
const cardsContainer = document.querySelector('.cards')
const template = document.getElementById('cardTemplate')

dishes.forEach(dish => {
    const cardNode = template.content.cloneNode(true)
    const card = cardNode.querySelector('.card')
    card.id = dish.id
    card.querySelector('img').src = `foodassets/${dish.filename}`
    card.querySelector('img').alt = dish.id
    card.querySelector('.card__content p').textContent = dish.dishname
    card.querySelector('.card__info p').textContent = `por ${dish.author}`
    cardsContainer.appendChild(cardNode)
})

两种方案都比逐节点创建拼接的写法更简洁，维护成本更低。

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