动态创建并添加类的div不生效CSS样式 不使用jQuery如何解决

完全可以实现，动态生成的DOM元素只要类名匹配规则，就能正常应用CSS文件中的样式，你遇到的异常可以按以下步骤排查解决：

1. 确认元素已插入DOM流 #

你提供的示例代码中仅创建了div元素、添加了类名，并没有将生成的元素插入到页面已有的DOM节点中，你需要补充插入逻辑：

public addDivs() {
   // 替换为你实际要插入的父容器节点
   const parent = document.querySelector('#your-container');
   for(let i = 0; i < 10; i++) {
      let div = document.createElement('div');
      div.classList.add('test');
      div.innerHTML = 'testing';
      // 将生成的div插入父容器
      parent.appendChild(div);
   }
}

2. 排查样式作用域问题（框架场景） #

如果你在Vue、React等前端框架环境下开发，且把.test的样式写在了带scoped属性的样式块中，会出现动态生成元素不匹配样式的问题：框架会给scoped样式的选择器自动添加组件唯一属性前缀，而你手动createElement生成的DOM不会带上这个前缀，导致样式匹配失败，直接写行内样式则不受该规则限制。
解决方法：

• 将.test的样式移到全局公共CSS文件中
• Vue框架下可以使用深度选择器匹配：::v-deep .test { /* 你的样式 */ }（Vue2）或:deep(.test) { /* 你的样式 */ }（Vue3）

3. 排查CSS优先级冲突 #

打开浏览器开发者工具，选中生成的div元素，查看样式面板中.test的样式是否被划掉，如果被划掉说明存在更高优先级的选择器覆盖了该样式，你可以通过提高.test选择器的优先级解决，比如写为div.test或者加上更精确的父级前缀。

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