Modify innerhtml by

Question

I’m trying to create HTML tags that will each receive a different value from an array. For this I used innerhtml to create the content, but they are superimposed only on the first div.

var y =document.getElementById("carta");
                    for(var i = 0; i <data.length; i++ ){
                        console.log(y);
                        var x =document.createElement("div");

                        x.innerHTML= `

                        <h5 class="card-header">
                            ${data[i].name}
                        </h5>
                        <div class="card-body">
                            <img src=${data[i].photo}
                        </div>
                        <div class="card-footer">
                            Preço: R$ ${data[i].price}
                        </div>                      
                                      `

                         y.appendChild(x);  


                    }

Answer 1

Change your code to look like this:

             var y = document.getElementById("carta");
             var x = document.createElement("div");

              //aqui você inicia uma variável que irá receber o código html do for
              var html;

                for(var i = 0; i <data.length; i++ ){                                        

             // para concatenar as linhas utiliza-se o "+="   
                    html += `
                               <h5 class="card-header">
                                  ${data[i].name}
                               </h5>
                               <div class="card-body">
                                 <img src=${data[i].photo}
                               </div>
                              <div class="card-footer">
                                 Preço: R$ ${data[i].price}
                              </div>  

                               `;

                }

         //adiciona o html gerado na variável X
         //aqui deve ser colocado fora do for para não sobrescrever a cada interação
         x.innerHTML = html;

         //e agora basta adicionar em Y
         y.appendChild(x);