title: Adding CSS to an element created after document load
body: <p>I recently asked a question about how to make an h1 with javascript and determine what the innerHTML will be. I tried every answer and none of them worked so I'm posting my entire code in case I have something in there that requires a different solution.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"&gt;
      &lt;script src="js/time.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="wrap"&gt;
        &lt;div id="time"&gt;
        &lt;/div&gt;
        &lt;div class="nav"&gt;
          &lt;div class="container"&gt;
            &lt;ul class="pull-left"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="pull-right"&gt;
              &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="jumbotron"&gt;
  
          &lt;div class="container"&gt;
            &lt;h1&gt;Forum Signatures&lt;/h1&gt;
            &lt;p&gt;A hobbyist art style wherein the artist uses various methods to create appealing effects around a render cut from a previously existing image.&lt;/p&gt;
            &lt;!--- &lt;a href="#"&gt;Learn More&lt;/a&gt; ---&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="neighborhood-guides"&gt;
          &lt;div class="container"&gt;
            &lt;h2&gt;Favorite Pieces&lt;/h2&gt;
            &lt;!---&lt;p&gt;Not sure where to stay? We've created neighborhood guides for cities all around the world.&lt;/p&gt;---&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-2"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/The-Colors-438254150"&gt;
                    &lt;img class="colors" src="images/colors.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-md-2"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/Schitz-443257857"&gt;
                    &lt;img class="schitz" src="images/schitz.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/Arcade-Sona-443074789"&gt;
                    &lt;img class="sona" src="images/sona.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/Mass-Effect-Signature-443034977"&gt;
                    &lt;img class="mass" src="images/mass_effect.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/Test-your-Luck-449429967"&gt;
                    &lt;img class="tf" src="images/tf.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/Super-Serial-442310653"&gt;
                    &lt;img class="serial" src="images/serial.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/Teemo-438254430"&gt;
                    &lt;img class="teemo" src="images/teemo.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/Death-From-Above-448908808"&gt;
                    &lt;img class="assassin" src="images/assassin.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://krucifiks.deviantart.com/art/Abstract-Tag-345903925"&gt;
                    &lt;img class="abstract" src="images/abstract.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;a class="images" href="http://shniper1337.deviantart.com/art/Normal-is-just-too-boring-452311932"&gt;
                    &lt;img class="normal" src="images/normal.png"&gt;&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="learn-more"&gt;
          &lt;h2&gt;Other Work&lt;/h2&gt;
          &lt;div class="container"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;
                &lt;a href="#"&gt;&lt;h3&gt;Web Design&lt;/h3&gt;&lt;/a&gt;
                &lt;p&gt;Extensive experience with HTML5 and CSS3. Multiple websites created, unique perspective of a designer and IT major combined.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                &lt;a href="#"&gt;&lt;h3&gt;Graphic Design&lt;/h3&gt;&lt;/a&gt;
                &lt;p&gt;Strong background in Photoshop as well as professional experience in Illustrator and InDesign.&lt;/p&gt;
  
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                &lt;a href="#"&gt;&lt;h3&gt;Software Engineering&lt;/h3&gt;&lt;/a&gt;
                &lt;p&gt;Information Technology student with a passion for logic and programming. Experience with Javascript, some JQuery and some Python.&lt;/p&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
        $(function() {
  
          $('#time').animate({
            right: '0%'
          }, 2000).delay(1500).animate({
            right: '100%'
          }, 2000);
        });
  
      &lt;/script&gt;
      &lt;noscript&gt;&lt;link href="main.css" rel="stylesheet"&gt;&lt;/noscript&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      background-color: #495987;
  }
  
  .wrap {
    background-color: #000000;
  }
  
  #time {
    width: 100%;
    height: 50px;
    right: -100%;
    position: absolute;
    top: 50px;
  
  }
  
  #time h1: {
    color: #FFAB23;
    font-size: 38px;
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 5px;
    font-style: italic;
    margin-top: 0px;
    line-height: 50px;
    text-shadow: 3px 3px 5px #111;
  }
  
  a {
    text-decoration: none;
  }
  
  .nav {
    background-color: #495987;
    height: 50px;
    width: 100%;
  }
  
  .nav a {
    color: #E16024;
    font-size: 11px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
    text-decoration: none;
  }
  
  .nav a:hover {
    font-size: 14px;
    color: #FFAB23;
  }
  
  .nav li {
    display: inline;
  }
  
  .jumbotron {
    background-image: url('images/design.png');
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .jumbotron .container {
    position: relative;
    top: 100px;
  }
  
  .jumbotron h1 {
    color: #cac9b9;
    font-size: 48px;
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
  }
  
  .jumbotron p {
    font-size: 16px;
    color: #222222;
    max-width: 430px;
    padding-top: 10px;
  }
  
  .learn-more {
    background-color: #495987;
  }
  
  .learn-more h3 {
    font-family: 'Arimo', sans-serif;
    font-size: 18px;
    color: #E16024;
    text-align: center;
  }
  
  .learn-more h2 {
    font-family: 'Arimo 700', sans-serif;
    text-align: center;
    color: #F3B600;
    font-weight: bold;
    text-shadow: 2px 2px 3px #111;
  }
  
  .learn-more h3:hover {
    font-size: 21px;
    color: #FFAB23;
  }
  
  .learn-more p {
    text-align: center;
    color: #BFD3EE;
  }
  
  .learn-more a {
    text-decoration: none;
  }
  
  .neighborhood-guides {
    background-color: #495987;
  }
  
  .neighborhood-guides h2 {
    color: #F3B600;
    text-align: center;
    font-weight: bold;
    text-shadow: 2px 2px 3px #111;
  }
  
  .neighborhood-guides p {
    font-size: 15px;
    margin-bottom: 13px;
  }
  
  .normal {
    width: 150px;
  }
  
  .colors {
    width: 130px;
  }
  
  .thumbnail {
    transition: .4s linear;
    transition: opacity .3;
    box-shadow: 0px 0px 10px #111;
  }
  
  .thumbnail:hover {
    transform: scale(2.2);
    -webkit-transform: scale(2.2);
    z-index: 1;
    box-shadow: 3px 3px 5px #111;;
  
  }
  
  .container:hover .thumbnail img:not(:hover) {
    opacity: 0.3;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function getStylesheet() {
        var currentTime = new Date().getHours();
        if (0 &lt;= currentTime&amp;&amp;currentTime &lt; 5) {
         document.write("&lt;link rel='stylesheet' href='night.css' type='text/css'&gt;");
         var h1 = document.createElement("h1");
         h1.innerHTML = "Good Morning!";
  
         document.getElementById("time").appendChild(h1);
        }
        if (5 &lt;= currentTime&amp;&amp;currentTime &lt; 12) {
         document.write("&lt;link rel='stylesheet' href='morning.css' type='text/css'&gt;");
         var h1 = document.createElement("h1");
         h1.innerHTML = "Good Morning!";
  
         document.getElementById("time").appendChild(h1);
        }
        if (12 &lt;= currentTime&amp;&amp;currentTime &lt; 17) {
         document.write("&lt;link rel='stylesheet' href='day.css' type='text/css'&gt;");
         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 &lt;= currentTime&amp;&amp;currentTime &lt; 22) {
         document.write("&lt;link rel='stylesheet' href='evening.css' type='text/css'&gt;");
         var h1 = document.createElement("h1");
         h1.innerHTML = "Good Evening!";
  
         document.getElementById("time").appendChild(h1);
        }
        if (22 &lt;= currentTime&amp;&amp;currentTime &lt;= 24) {
         document.write("&lt;link rel='stylesheet' href='night.css' type='text/css'&gt;");
         var h1 = document.createElement("h1");
         h1.innerHTML = "Good Evening!";
  
         document.getElementById("time").appendChild(h1);
        }
  }
  
  getStylesheet();
  </code></pre>
  
  <p>So I'm trying to create an h1 in the #time id which starts off of the screen and animates to the middle and then goes back off using JQuery. Even when I comment out all css and the JQuery the h1 does not appear on the screen.</p>
  
  <p>Please Help.</p>