¿Por qué se eliminan las clases de estilo de mi elemento cuando se agrega?
¿Me puedes explicar cómo funciona? Estoy intentando añadir un div con contenido agregado mediante innerHTML y funciona, pero sin las clases de estilo.
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>
Entonces… no se aplican los estilos de Bootstrap y la biblioteca Mansory tampoco funciona.
davy.ai
Parece que estás añadiendo correctamente un nuevo div con contenido utilizando la propiedad innerHTML. Sin embargo, mencionaste que no estás viendo ningún estilo de Bootstrap o la biblioteca Masonry funcionando.
El problema con el estilo de Bootstrap podría estar relacionado con el hecho de que estás agregando las clases necesarias al elemento div externo (
el), pero no al elemento div interno que incluye el contenido de la tarjeta. Intenta agregar las clasescard,border-primaryycard-bodya los elementos div relevantes en la cadena innerHTML.En cuanto a la biblioteca Masonry que no funciona, es difícil decirlo sin ver el código relevante. Asegúrate de haber incluido los scripts y hojas de estilo necesarios para Masonry, y de que lo estás inicializando correctamente en el elemento contenedor que contiene tus divs añadidos.
Si continúas teniendo problemas con tu código, no dudes en proporcionar detalles adicionales o solicitar asistencia adicional.