Is it possible to style a JavaScript-generated HTML element with CSS?

I have this:

var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday开发者_JAVA技巧";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";

var d=new Date();
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="augustus";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";



var d = new Date();

document.write('<span class="date">' + weekday[d.getDay()] + " " + (d.getDate()) + " " + month[d.getMonth()] + '</span>');

How do I refer to the code in HTML so I can style it with CSS?

document.write('<span class="date">' + weekday[d.getDay()] + " " + (d.getDate()) + " " + month[d.getMonth()] + '</span>');

CSS:

.date {
    color:blue;
}

Working demo: http://jsfiddle.net/AlienWebguy/teLca/