为什么使用appendChild追加元素时其上的样式类会失效？

• Bootstrap网格结构不规范
  Bootstrap的col-*系列类必须作为row类元素的直接子元素才能生效，你当前的#gallery容器如果没有添加row类，也没有外层嵌套container/container-fluid容器，网格系统的宽度、边距规则都不会生效，对应的卡片样式也会出现异常。
  正确的HTML结构参考：

<div class="container">
  <div class="row" id="gallery"></div>
</div>

• Bootstrap依赖引入异常
  检查页面是否正确引入了Bootstrap的CSS文件，以及Bootstrap 5+对应的JS依赖（如果用到带交互的组件），如果没有引入对应资源，所有Bootstrap类的样式规则都不会加载。可以打开浏览器开发者工具的元素面板，选中你创建的div，查看对应类名是否有匹配的样式规则，无规则则是引入问题。

• Masonry库初始化时机错误
  Masonry需要在所有DOM元素加载完成后再初始化，如果你是先初始化Masonry，再动态插入元素，Masonry无法识别新增的节点，自然无法正常排版。动态插入元素后需要主动调用Masonry的更新方法，示例：

// 假设你已经初始化了Masonry实例
const msnry = new Masonry('#gallery', {
  itemSelector: '.col-sm-4'
});

// 动态插入元素后执行以下代码
msnry.appended(el);
msnry.layout();

另外注意检查库名拼写，你问题里写的Mansory是错误拼写，正确库名为Masonry，代码中如果拼写错误会直接导致库加载失败。同时你代码里注释掉的// });说明原有代码可能嵌套在某个回调（如Ajax请求、事件回调）中，如果回调执行时机晚于Masonry初始化，也会触发该问题。

• 样式优先级冲突
  如果页面有自定义CSS规则，优先级高于Bootstrap的类规则，也会导致Bootstrap样式被覆盖。可以在开发者工具中查看对应类的样式是否被划掉，如果被划掉则需要调整自定义样式的优先级或者类名。

• DOM执行时机问题
  如果你的JS代码放在页面<head>中，没有包裹DOMContentLoaded事件回调，可能出现执行代码时#gallery元素还未渲染的情况，即使追加成功也可能出现样式、脚本加载异常。

内容的提问来源于stack exchange，提问作者Adrian