JavaScript创建的HTML类无法应用CSS样式，求解决方法

嘿，我看到你遇到了用JS动态生成的元素没法正常加载CSS样式的问题，咱们来一步步排查解决它～

核心问题：错误使用class而非className #

你代码里最关键的错误是在原生DOM操作中用了.class来设置元素类名，但原生JavaScript里操作元素的class属性必须用className——因为class是JavaScript的保留字，浏览器不会识别你对.class的赋值，这直接导致CSS选择器找不到对应的元素，样式自然不生效。

看你代码里的这些位置：

mewTime.class = "chatTime";
content.class = "messageContent"
message.class = "message";

全部要改成className：

mewTime.className = "chatTime";
content.className = "messageContent";
message.className = "message";

次要问题：jQuery与原生DOM混合操作的小坑 #

你的createUser函数用jQuery创建了元素，但后面在append的时候用了userName[0].outerHTML把它转成字符串，这其实没必要，还可能丢失一些潜在的绑定。更稳妥的方式是直接把jQuery对象对应的原生DOM元素append进去：

// 把原来的 message.append(userName[0].outerHTML);
// 改成：
message.append(userName[0]);

如果想更统一，也可以把整个DOM操作都换成jQuery，或者都用原生，避免两种方式混合带来的混淆。

修正后的完整代码示例 #

JavaScript部分

socket.on('chat', function (data) {
  feedback.innerHTML = '';
  
  var mewTime = document.createElement("span")
  mewTime.className = "chatTime"; // 修正类名赋值方式
  mewTime.textContent = data.currentTime; // 原生DOM设置文本用textContent更规范
  console.log(mewTime);
  
  var userName = createUser(data, mewTime);
  
  var content = document.createElement("span")
  content.className = "messageContent" // 修正类名赋值方式
  content.append(data.messageInput)
  
  var message = document.createElement("div")
  message.className = "message"; // 修正类名赋值方式
  message.append(userName[0]); // 修正元素追加方式
  message.append(mewTime);
  message.append(document.createElement("br"))
  message.append(content);
  
  output.append(message);
  currentTime = '';
  messageInput.focus();
});

function createUser(data, time){
  if(time === null){
    var userName = $('<span class="userNameOnline"/>');
    userName.text(data);
  } else{
    var userName = $('<span class="userName"/>')
      .text(data.username + ' ' + time.textContent); // 对应修改文本获取方式
  }
  console.log(userName);
  return userName;
}

CSS部分（保持不变）

.message{
  color: red;
}
.userName {
  color: blue;
}

额外小提示 #

修改后可以打开浏览器的Elements面板（而不是只看控制台打印的对象），检查动态生成的元素是否真的带有你设置的class属性——控制台打印对象时显示的属性可能和实际DOM元素的属性有差异，直接看Elements面板是最准确的验证方式。

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