jQuery .html() function destroys code within <dl> in IE7 only

Posted a few answers on SO, but this is my first question :)

Bit of background... I am playing with the easyAccordian plugin for jQuery: http://www.madeincima.eu/samples/jquery/easyAccordion/. Each slide (made of<dd>'s) has dyamic content. On one particular slide I want to swap out the entire contents of the <dd> when the user clicks a button...

The code follows (or you can visit the jsFiddle):

HTML:

<dl>
<dt class="click">Slide heading</dt>
<dd class="specs"></dd>

<div style="display:none;">
    <div id="开发者_开发知识库defaultSpecs">
        <div style="width:80%;margin-left:10%;text-align:center;margin-top:60px;">
            wrsyik5s7khgjsdghf      
        </div>
    </div>
</div>
</dl>

JS:

$("dt.click").click(defaultSpecs);

function defaultSpecs() {
    //alert($("#defaultSpecs").html());
    var defSpec  =  $("#defaultSpecs").html();
    //alert($("#defaultSpecs").html());
    $("dd.specs").html(defSpec);
    //alert($("#defaultSpecs").html());
    alert($("body").html());
}

This works a charm in Firefox and other versions of IE, however when used in IE7, it does not...

Html within the <dl> and below the <dd> is seemingly being destroyed and then (obviously) the function fails when called a second (or third) time...

Have I missed a crucial aspect of the <dl> or <dd> tags? Or is there something wrong with the jQuery .html() function?

A few things worth noting:

• There are multiple <dd> and <dt>s in the original code, however the error still replicates without them.

• I have included alerts so that you can see what the .html() of various elements return at certain points... feel free to uncomment them and tinker :)

Any help on this would be greatly appreciated :)

I think the problem is that your div tag is outside of the dd tags. It's in the dl tag which may only contain either a dt or dd from what I gather. Try moving the div into the dd tag.

Specifically, in my link note this:

<!ELEMENT DL - - (DT|DD)+ -- definition list -->

If you were allowed to use other block level or inline tags, it would be like this:

<!ELEMENT DL - O (%flow;)* -- definition list -->

Note the flow option means you can have block or inline level elements within it. Unfortunately, though, thats not the way it is. :(

As to why you're having issues, the browser is probably trying create the DOM while taking this into account and has to add new elements. This would cause issues with JavaScript trying to follow a specific structure since the browser is creating it's own elements for the structure.