如何用javascript重复html结构

Question

我试图在javascript中使用for循环来重复一个html结构，我想知道是否有更简单/更好的方法(似乎太长了(。

结构：

<section class="cards">
<div class="card" id="afb">
<div class="card__image-container">
<img src="foodassets/asinhas.png" alt="afb">
</div>
<div class="card__content">
<p>Asinhas de frango ao barbecue</p>
</div>
<div class="card__info">
<p>por Vania Steroski</p>
</div>
</div>
...

</section>

Javascript：

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"
}
]
const cards1 = document.querySelector('.cards')
for (let dish of dishes) {
let card = document.createElement("div")
card.classList.add('card')
card.setAttribute("id", dish.id)
let divimg = document.createElement("div")
divimg.classList.add('card__image-container')
let img = document.createElement("img")
img.setAttribute("src", `foodassets/${dish.filename}`)
divimg.appendChild(img)
card.appendChild(divimg)
let content = document.createElement("div")
content.classList.add('card__content')
let p = document.createElement("p")
p.innerText = `${dish.dishname}`
content.appendChild(p)
card.appendChild(content)
let info = document.createElement("div")
info.classList.add('card__info')
let p2 = document.createElement("p")
p2.innerText = `por ${dish.author}`
info.appendChild(p2)
card.appendChild(info)

cards1.appendChild(card)
}

Answer 1

使用模板文本和js映射。请参阅下面的片段。

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(item => {
return `
<div class="card" id="${item.id}">
<div class="card__image-container">
<img src="foodassets/${item.filename} alt="${item.dishname}">
</div>
<div class="card__content">
<p>${item.dishname}</p>
</div>
<div class="card__info">
<p>${item.author}</p>
</div>
</div>
`
}).join("")

<section class="cards">     
</section>

Answer 2

最简单的：

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'
} ] 

const cards1 = document.querySelector('.cards')
for ( let {id,filename,dishname,author} of dishes)
{
let card = document.createElement('div') 
card.className = 'card'
card.id        = id
card.innerHTML = `
<div class="card__image-container">
<img src="foodassets/${filename}" alt="${id}">
</div>
<div class="card__content">
<p>${dishname}</p>
</div>
<div class="card__info">
<p>${author}</p>
</div>`
cards1.appendChild(card) 
}

Answer 3

使用cloneNode和deep = true来克隆元素(和子元素(，然后对其进行解析、设置值并将克隆附加到DOM。

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"
}
]
const cards1 = document.querySelector('#cards_container');
for (let dish of dishes) {
let card = cards1.children[0], newCard = card.cloneNode(true), img = newCard.querySelector('img'),ps=newCard.querySelectorAll('p');
newCard.id = img.alt = dish.id;
ps[0].innerText = dish.dishname;
ps[1].innerText = dish.author;
img.src = 'foodassets/'+dish.filename;
cards1.appendChild(newCard);
}

<div class="cards" id="cards_container">
<div class="card" id="afb">
<div class="card__image-container">
<img src="foodassets/asinhas.png" alt="afb">
</div>
<div class="card__content">
<p>Asinhas de frango ao barbecue</p>
</div>
<div class="card__info">
<p>por Vania Steroski</p>
</div>
</div>
</div>

或使用HTML5<templates>

const template = document.querySelector("template.card");
const section = document.querySelector("#cards_container");
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"
}
]
for (let dish of dishes) {
let clone = document.importNode(template.content, true),
p = clone.querySelectorAll("p"),img=clone.querySelector('img');
p[0].textContent = dish.dishname;
p[1].textContent = dish.author;
img.alt = clone.id = dish.id;
img.src += dish.filename
section.appendChild(clone);
}

<section class="cards" id="cards_container">
<template class="card">
<div class="card__image-container">
<img src="foodassets/">
</div>
<div class="card__content">
<p></p>
</div>
<div class="card__info">
<p></p>
</div>
</template>
</section>