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

```