Can you explain me how it works? Im trying to append div with content added by innerHTML and it's works, but with no styling classes.
const el = document.createElement("div");
el.classList.add("col-sm-4", "col-md-3", "py-3");
el.innerHTML = `<div class="card border-primary">
<div class="card-body">
<img src="https://via.placeholder.com/80" class="img-regular">
</div>
</div>`
document.getElementById('gallery').appendChild(el);
// }); // commented out by community<div id="gallery"></div>so... no bootstrap styling and mansory library also not working.
You've got 2 opening <div>'s and 3 closing </div>s. Try removing the extra closing tag.
const el = document.createElement("div");
el.classList.add("col-sm-4", "col-md-3", "py-3");
el.innerHTML = `<div class="card border-primary">
<div class="card-body">
<img src="${photo.urls.small}" class="img-regular">
</div>
</div>`
gallery.appendChild(el);