Applying CSS to JS generated content

[zwhalen]

Hello,

I've got what I hope is a problem with a simple solution, because I see it working all the time. I just can't seem to figure it out on my own.

I'm using javascript to spit out some code on the page, (specifically, I'm inserting a div with a number before each paragraph). Those divs have a class name, "counter", and are supposed to receive certain styles from the main css file.

So it works fine in Firefox and friends, but IE does fine up to assigning the class. It seems like it doesn't know to reuse the CSS for newly rendered content? Anyway, here's my code:

var count = function () {
var ps = document.getElementsByTagName('p');
var inc = 1;
for (var i=0; i<ps.length; i++){
var node = ps[i];
var num = document.createElement("div");
num.setAttribute("class", "counter");
num.appendChild(document.createTextNode(inc));
if ((node.parentNode.getAttribute('id') == 'article') &&!(node.getAttribute('class') == 'nocount')){
node.parentNode.insertBefore(num,node);
inc++;
}
}
}

I can see the new divs and according to the DOM inspector they do have the class "counter", they're just not receiving the styles somehow.

Any help or suggestions will be greatly appreciated.

zach

[zwhalen]

Oh wait, I should have looked down this forum a bit.

Switching the setAttribute("class", counter") to className = 'counter' did the trick. Problem solves; though if anyone has any comments on the code in general, I'd be happy to hear it. I'm quite a novice at javascript, obviously.