How to style DOM element with CSS that was created with JavaScript function

Question

I have a JavaScript function that creates some DOM nodes:

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);
}

this function creates the following HTML:

<div id="questionHolder">
    <h3 id="question">Is the sky blue?</h3>
</div>

What I would like to know is how can I style the div or h3 elements using CSS?

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 body tags of my page.

I think this means that the CSS styles will not apply to the created elements and my testing has agreed with this.

Thanks, any help appreciated.

EDIT:

I changed the function in the question to make it simpler to read. The actually function pulls questions out of an array:

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);
}

This does not seem to be working for me. Does that change anything?

Answer 1

write some style in css file when the div append to the dom .it will render as you write in

css file

#questionHolder {
    background-color: green;
    width: 300px;
    height: 300px;
}

#question {
    background-color: blue;
}

demo: http://jsfiddle.net/DfD9y/

Answer 2

Just add style attribute in your script, It will work for you,

questionBox.setAttribute("style",""background-color":"yellow"");

Your code will look like this,

function setHeader(){
    var questionBox = document.createElement("div");
    questionBox.setAttribute("id","questionHolder");
    questionBox.setAttribute("style",""background-color":"yellow"");
    document.body.appendChild(questionBox);
    var questionElement = document.createElement("h3");
    questionElement.setAttribute("id","question");
    var questionText = document.createTextNode("Is the sky blue?");
    questionElement.appendChild(questionText);
    questionBox.appendChild(questionElement);
}