How to repeat html structure with javascript?

Question

I was trying to repeat a html structure using a for loop in javascript, and I wanted to know if there is a simpler/better way (seemed too long).

Structure:

<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

UsecloneNode with deep = true to clone your element (and childs) then parse it, set values and append clone to the 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>

OR using 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>

Answer 2

Using template literals and js map . See the snippet below.

 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 3

the simplest :

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) 
  }