title: How to style DOM element with CSS that was created with JavaScript function
body: <p>I have a JavaScript function that creates some DOM nodes:</p>
  
  <pre><code>function setHeader(){
      var questionBox = document.createElement("div");
      questionBox.setAttribute("id","question" + (questionNumber + 1));
      document.body.insertBefore(questionBox,scriptBox);
      var questionElement = document.createElement("h3");
  //  questionElement.setAttribute("id","question" + (questionNumber + 1));
      var questionText = document.createTextNode(questions[questionNumber].question);
      questionElement.appendChild(questionText);
      questionBox.appendChild(questionElement);
      $(questionBox).hide().fadeIn(1000);
  }
  </code></pre>
  
  <p>this function creates the following HTML:</p>
  
  <pre><code>&lt;div id="questionHolder"&gt;
      &lt;h3 id="question"&gt;Is the sky blue?&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I would like to know is how can I style the <code>div</code> or <code>h3</code> elements using CSS?</p>
  
  <p>I presume the CSS file is read before the DOM nodes are created due to the fact that the CSS is linked in the header and my JavaScript file is linked at the end of the <code>body</code> tags of my page.</p>
  
  <p>I think this means that the CSS styles will not apply to the created elements and my testing has agreed with this.</p>
  
  <p>Thanks, any help appreciated.</p>
  
  <p>EDIT:</p>
  
  <p>I changed the function in the question to make it simpler to read. The actually function pulls questions out of an array:</p>
  
  <pre><code>function setHeader(){
          var questionBox = document.createElement("div");
          questionBox.setAttribute("id","question" + (questionNumber + 1));
          document.body.appendChild(questionBox);
          var questionElement = document.createElement("h3");
          questionElement.setAttribute(questions[questionNumber].question));
          var questionText = document.createTextNode("Is the sky blue?");
          questionElement.appendChild(questionText);
          questionBox.appendChild(questionElement);
  }
  </code></pre>
  
  <p>This does not seem to be working for me. Does that change anything?</p>