[英]How to repeat html structure with javascript?
我试图在 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)
}
使用带有deep = true
cloneNode
克隆您的元素(和子元素),然后解析它,设置值并将克隆附加到 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>
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>
最简单的 :
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)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.