apply css rules on programmatically created div

Question

I have a site that creates new divs in real time (using JS). The class of each div is "conv". My problem is, that the css rules that I have written for this class doesn't apply to the new divs. conv.length is the length of the xml file I am using.

The JS:

for(i=0; i<conv.length;i++){
  var div= document.createElement("div");
  div.id="conv"+i;
  div.class= "conv";
  div.innerHTML=conv[i].childNodes[0].nodeValue;
  div.style.height="50px";
  div.style.overflow="hidden";
  document.getElementById("conv").appendChild(div);
}

The CSS:

.conv {
  background-color:#CCC;
}

jcaron · Accepted Answer · 2014-06-27 13:53:14Z

5

The class property of an HTML element is a special case, it is not the class attribute. That one is accessible via className:

div.className="conv";

answered Jun 27, 2014 at 13:53

jcaron

17.8k6 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jcaron Over a year ago

Well, I know it because I stumbled on the same issue a few years ago :-)

Collectives™ on Stack Overflow

apply css rules on programmatically created div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related