JavaScript追加表格行时如何注入自定义类？

先给你揪出两个写法里的关键问题，一步一步来：

首先修复写法1的致命bug #

你写法1里最后一行的赋值写错了！content = '</tr>'会直接把之前拼接的所有内容全覆盖掉，导致实际插入到表格里的只有一个闭合的</tr>标签，完全是无效的DOM结构，样式肯定不可能生效。正确的拼接应该用+=来追加收尾标签：

// 修正后的写法1
let content = '<tr id="list">';
content += '<td><input type="text" class="text-left myClass" /></td>';
content += '</tr>'; // 这里是 += 不是 =！
$('table').append(content);

写法2的结构是对的，排查样式不生效的原因 #

写法2通过jQuery链式构建DOM的方式是完全正确的，元素最终会被正确渲染，类名也会被加上。那myClass没生效，大概率是这几个原因：

• CSS优先级被碾压：如果text-left的样式用了更高优先级的选择器（比如带标签前缀、ID，或者加了!important），会把myClass的样式覆盖。举个例子，如果text-left是这么写的：

  input.text-left {
    text-align: left !important;
  }
  

  那你要让myClass的样式生效，就得提升它的优先级，比如：

  input.text-left.myClass {
    /* 你的自定义样式，比如 */
    color: #ff4444;
    padding: 4px 8px;
  }
  

• 自定义CSS本身有问题：检查下myClass的拼写是不是错了（比如写成myclass或者MyClass，CSS类名是大小写敏感的），或者样式属性写错了（比如把text-align写成text-algin）。你可以打开浏览器F12的Elements面板，找到这个input元素，看类列表里有没有myClass，再看Styles面板里这个类的样式是不是被划掉了——划掉就是被覆盖，没显示就是样式没加载。

• 样式加载顺序不对：如果你的自定义CSS是在jQuery代码之后加载的，偶尔会出现样式没及时应用的情况，确保你的自定义样式表放在页面的<head>里，或者在DOM渲染前就已经加载完成。

快速验证方法 #

打开浏览器开发者工具（按F12）：

1. 找到新增的input元素，查看类列表：如果myClass不在里面，那是代码构建元素的问题；
2. 如果myClass在类列表里，看Styles面板：找到myClass的样式规则，看是不是被划掉了——划掉就调优先级，没找到就检查CSS文件有没有加载。

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