display property override on dynamically generated HTML

[sylvain courcoux]

Hi,

I have the following HTML/CSS:

<div id="TheWrapper" class="WrapperDiv"></div>

.WrapperDiv {

width:200px; background:red;}

#TheDataContainer{display:none;} #TheWrapper{display:none;}

I run the following javascript:

$(document).ready(function () {

$('#TheWrapper').prepend('<div id="ThePanel"></div>');

$('#ThePanel').html('<div id="TheDataContainer"></div>');

does not override the display:none property $('#TheDataContainer').html('<div>some text</div>').show();

overrides the display:none property $('#TheWrapper').show();

});

The jsFiddle is here: ​http://jsfiddle.net/y79fc/2/

I think I should be able to see "some text" no? Let me know.

sylvain.

[dmethvin]

Please ask for help on a forum or StackOverflow, in particular regarding CSS cascade.