为什么在添加元素时样式类会从我的元素中删除？

Question

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.

Answer 1

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);