0
Good evening, I am feeding my html to JS using the following code:
function loja(){
const divLoja = document.querySelector('.teste')
const api = new XMLHttpRequest()
api.open('GET', `http://localhost:3000/produtos/class/loja`, true);
api.send()
api.onreadystatechange = function(){
if(this.status == 200 && this.readyState == 4){
const dados = JSON.parse(this.responseText)
console.log(dados)
dados.produtos.forEach((item) => {
let div = document.createElement('section');
let itemDiv = `
<div class="col-lg-3 col-md-6 mb-4">
<!-- Card -->
<div class="card card-cascade narrower card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<img src="${item.imagem}" class="card-img-top" alt="cartão ${item.nome}">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card image -->
<!-- Card content -->
<div class="card-body card-body-cascade text-center pb-3">
<!-- Title -->
<h5 class="card-title mb-1">
<strong>
<a value="${item.id_produto}" data-value="${item.id_produto}" onclick="redirect(this)" style="color: rgb(0, 153, 255);">${item.nome}</a>
</strong>
</h5>
<!-- Description -->
<p class="card-text">Cartão pre-pago ${item.nome}</p>
<!-- Card footer -->
<div class="card-footer px-1">
<span class="float-left font-weight-bold">
<strong>R$${item.preco}</strong>
</span>
<span class="float-right">
<a class="material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Ver detalhes">
<i value="${item.id_produto}" data-value="${item.id_produto}" onclick="redirect(this)" class="fas fa-eye grey-text ml-3"></i>
</a>
<a class="material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Adicionar ao carrinho">
<i value="${item.id_produto}" data-value="${item.id_produto}" onclick="cartAddtocart(this)" class="fas fa-shopping-cart text-danger ml-3"></i>
</a>
</span>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
`
div.innerHTML = itemDiv;
divLoja.appendChild(div)
});
}
}
}
loja()
When I create an element in the case of my test it was Section everything gets html bugged because it’s like css doesn’t apply in the right place. However I just have to add each element to my main div using foreach and if I didn’t have to create an element to be able to add it would work. However when I use appendchild passing as argument the template string itself of the following error:
full.js:57 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at full.js:57
at Array.forEach (<anonymous>)
at XMLHttpRequest.api.onreadystatechange (full.js:11)
There’s a way I can add directly to my div without having to create another div for each element?