SO-60885320

by David Thomas

HTML

<div id="containerId"></div>

JavaScript

// mangosteen
// https://i.stack.imgur.com/4CAZu.jpg
// pineapple
// https://i.stack.imgur.com/a9xXV.png
// rambutan
// https://i.stack.imgur.com/SqYhm.gif
const fruits = [`https://i.stack.imgur.com/4CAZu.jpg`, `https://i.stack.imgur.com/SqYhm.gif`, `https://i.stack.imgur.com/a9xXV.png`];

let insertCard = document.getElementById('containerId');
let cardBases = fruits.map(
  (href, index) => `<div class="card-front card-face">
  	<span class="number">${index}</span>
    <img class="card-value card-img"
        src="${href}">
</div>`
);

insertCard.insertAdjacentHTML('beforeend', cardBases.join(''));