IE6 bug of using the add method to add optgroup

The rational use of the optgroup element greatly enhances the performance of the select drop-down list box. I prefer to use optgroup for data classification in the SELECT statement, but I don't know what kind of aircraft Microsoft is engaged in. There are so many HTML Tag bugs. I found a problem when I added optgroup by using the DOM operation select.

The following is simple:CodeWhat results will we get?

< Select ID = "Slt1" >
</ Select >
< Script Language = "JavaScript" >
Document. Body. onload =   Function ()
{
For ( VaR I = 0 ; I <   3 ; ++ I)
{
VaR Group = Document. createelement ('optgroup ');
Group. Label = 'Group 1 - ' + I;
Slt1.add (group );
}
} ;
</ Script >

According to our understanding of the select Add method, we should get the grouping list box:

But in fact, the list box we get is:

. Why is the second case? So let's see what the HTML generated after the IE Dom operation is?

< Select ID = Slt1 >
< Optgroup Label = "Group 1-0" >
< Optgroup Label = "Group 1-2" >
</ Optgroup >
< Optgroup Label = "Group 1-1" >
</ Optgroup >
</ Select >

What is this? How can optgroup be embedded in optgroup? Optgroup does not support mutli-hierarhical!

In the past, we had to use the general Dom operation method, that is, the appendchild (element) method to obtain the correct grouping structure of the select list. The sample code is as follows:

< Select ID = "Slt2" >
</ Select >
< Script Language = "JavaScript" >
Document. Body. onload =   Function ()
{
For ( VaR I = 0 ; I <   3 ; ++ I)
{
VaR Group = Document. createelement ('optgroup ');
Group. Label = 'Group 2 - ' + I;
Slt2.appendchild (group );
}
} ;
</ Script >

As for the add method, it can only be counted as another bug of optgroup :(

RelatedArticle: Defects and fixes encountered when optgroup is used