Adding a class to a div not working properly

I am dynamically creating a div using jQuery and then adding a class to it in order to style it:

var borderDiv = $('<div />').addClass('borderTaco');
// add borderDiv to the DOM...

Where borderTaco is defined to be the following style:

.borderTaco {
  background-color : #cde;
  z-index : 1;
  height :开发者_运维技巧 100%;
}

Even though the element is being properly inserted into the DOM, the style doesn't seem to be applied to the div. When I inspect the element in firebug, it indicates that the element does have the correct class attribute, but it has no style rules and doesn't appear correctly.

Here is a jsbin of the code.

Your class is used in an iframe so the class should be defined in this iframe.

Try calling addClass after the div is added to the DOM.

var borderDiv = $('<div />');
// add to DOM
borderDiv.addClass('borderTaco');

You can also just add the class right to the div in the selector:

$('<div class="borderTaco" />').appendTo('body');