Javascript 向文档加载后创建的元素添加CSS

我最近问了一个问题，关于如何使用javascript创建h1并确定innerHTML是什么。我尝试了每一个答案，但没有一个有效，所以我发布了我的全部代码，以防有需要不同解决方案的内容

HTML

JS

函数getStylesheet（）{
var currentTime=new Date（）.getHours（）；
如果（0为一个，则在创建h1时应如下所示：

document.createElement("H1");

请注意大写字母H。请参阅此处：
了解其中一个，当您创建h1时，它应该是：

document.createElement("H1");

请注意大写字母H。请参阅此处：
下次，请在上设置一个示例，以便其他人更容易修改您的代码示例。如果标题描述了您正在描述的实际问题，它也会帮助我们帮助您

解决标题中提到的问题：动态创建的元素会自动将现有样式应用于它们。请参见此简单示例

现在看看你的JavaScript，我想说的问题（除了一些错误，比如h1变量的多个声明）是你试图附加到DOM中的那些动态CSS文件。我建议你从一开始就包含CSS文件（或者在一个CSS文件中包含样式，以减少请求数量）。此外，在每个if语句中都有大量重复的代码。下面是同样的优化内容（想象一下CSS中已经包含了与时间相关的样式）

函数assignTimeStyle（）{
var currentTime=new Date（）.getHours（），
h1=document.createElement（“h1”），
文本，
风格
如果（0下次，请在上设置一个示例，以便其他人更容易修改您的代码示例。如果标题描述了您正在描述的实际问题，它也会帮助我们帮助您

解决标题中提到的问题：动态创建的元素会自动将现有样式应用于它们。请参见此简单示例

现在看看你的JavaScript，我想说的问题（除了一些错误，比如h1变量的多个声明）是你试图附加到DOM中的那些动态CSS文件。我建议你从一开始就包含CSS文件（或者在一个CSS文件中包含样式，以减少请求数量）。此外，在每个if语句中都有大量重复的代码。下面是同样的优化内容（想象一下CSS中已经包含了与时间相关的样式）

函数assignTimeStyle（）{
var currentTime=new Date（）.getHours（），
h1=document.createElement（“h1”），
文本，
风格
如果#time h1:{-行中的（0）在CSS中删除“：”不会更改任何内容否，还存在进一步的问题，但是删除“：”将有助于应用样式。请看这里：
document。加载页面后，write
不起作用（一般来说，这不是一种好的技术）。而是在处理H1时将这些
标记附加到DOM中。在CSS中的#time H1:{-行中删除“：”不会更改任何内容。不，还有其他问题，但是删除“：”将有助于应用样式。请看这里：
文档。加载页面后，写入
不起作用（一般来说，这不是一种值得依赖的好技术），而是在使用H1.if（12 if）时将那些
标记附加到DOM中（12）我不完全确定我的问题是什么。我把time.js的链接放在了#time div中，这就解决了它。除非它也在#time div中，否则你的补丁不会解决它。但是应该有一种方法可以做到这一点，而不需要把它放在正确的位置。这似乎意味着你的
标记顺序有问题-time.js依赖于jquery吗是吗？因为你把它放在jQuery脚本标签之前。总之，你的评论有点让人困惑。你能详细解释一下“把time.js的链接放在#time div中”是什么意思吗？您是否在div元素中放置了
标记？是的，我不完全确定我的问题是什么。我将指向time.js的链接放在了#time div中，然后修复了它。您的修复程序没有修复它，除非它也在#time div中。但是应该有一种方法可以做到这一点，而无需将其正确放置在那里？这似乎意味着您有一个iss使用你的
标记顺序-time.js是否依赖于jQuery？因为你将它包含在jQuery脚本标记之前。总之，你的评论有点混乱。你能详细说明一下“将指向time.js的链接放在#time div中”是什么意思吗？你是否在div元素中放置了
标记？是的，我将
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
       var h1 = document.createElement("h1");
       h1.innerHTML = "Good Morning!";

       document.getElementById("time").appendChild(h1);
      }
      if (5 <= currentTime&&currentTime < 12) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
       var h1 = document.createElement("h1");
       h1.innerHTML = "Good Morning!";

       document.getElementById("time").appendChild(h1);
      }
      if (12 <= currentTime&&currentTime < 17) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
       var h1 = document.createElement("h1");
        h1.id= "timeh1";
        document.getElementById("time").appendChild(h1);
        document.getElementById("timeh1").innerHTML = "Good Afternoon!";

       document.getElementById("time").appendChild(h1);
      }
      if (17 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
       var h1 = document.createElement("h1");
       h1.innerHTML = "Good Evening!";

       document.getElementById("time").appendChild(h1);
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
       var h1 = document.createElement("h1");
       h1.innerHTML = "Good Evening!";

       document.getElementById("time").appendChild(h1);
      }
}

getStylesheet();

document.createElement("H1");

function assignTimeStyle() {
  var currentTime = new Date().getHours(),
      h1 = document.createElement("h1"),
      text,
      style;

  if (0 <= currentTime && currentTime < 5) {
   text = "Good Morning!";
   style = "night";
  }
  if (5 <= currentTime && currentTime < 12) {
    text = "Good Morning!";
    style = "morning";
  }
  if (12 <= currentTime && currentTime < 17) {
    text = "Good Afternoon!";
    style = "day";
  }
  if (17 <= currentTime && currentTime < 22) {
   text = "Good Evening!";
   style = "evening";
  }
  if (22 <= currentTime && currentTime <= 24) {
   text = "Good Evening!";
   style = "night";
  }

  h1.innerHTML = text;
  document.getElementById("time").appendChild(h1);
  document.querySelector("body").classList.add(style);
}