Нужно создать большой div
, в котором будет еще несколько элементов, все это должно выглядеть так
При помощи innerHTML
это сделать не получается, потому что работа с бд, и новый элемент не создается.
Я делаю так, но код слишком громоздкий и хотелось бы уменьшить его по возможности
const div = document.createElement("div");
div.setAttribute('data-id', doc.id);
const divinfo = document.createElement("div");
divinfo.className = "info_pack";
const divrow = document.createElement("div");
divrow.className = "info_pack_row";
const divrowimg = document.createElement("div");
divrowimg.className = "info_pack_row_img";
const img = document.createElement("img");
img.style.width = "30px";
img.style.height = "30px";
img.src = doc.data().src;
const divrowtxt = document.createElement("div");
divrowtxt.className = "info_pack_text";
divrowtxt.textContent = doc.data().cryptoname;
const divpackmoney = document.createElement("div");
divpackmoney.className = "info_pack_money";
divpackmoney.textContent = doc.data().income;
const span = document.createElement('span');
span.textContent = "$";
divpackmoney.appendChild(span);
divrowimg.appendChild(img);
divrow.appendChild(divrowimg);
divrow.appendChild(divrowtxt);
divinfo.appendChild(divrow);
divinfo.appendChild(divpackmoney);
div.appendChild(divinfo);
orders.appendChild(div);
<div class="info_pack">
<div class="info_pack_row">
<div class="info_pack_row_img">
<img src="images/XRP.png" style="width: 30px; height: 30px;">
</div>
<div class="info_pack_text">ripple</div>
</div>
<div class="info_pack_money">1008.00<span>$</span></div>
</div>