some $.create('<x>') fixes for older browsers, test for creation of most HTML5 elements

[rvagg]

All I wanted was a simple little $('<option>') but alas it was broken in older versions of IE. Apparently you can't just createElement('select') and stick the <option> inside it in IE6 & 7 (maybe 8). So I've put the list of HTML4 tags into test.html, excluded a few that probably shouldn't be supported anyway, and ran create('<tag>') to see what breaks and what doesn't.

OPTION isn't the only special case, of course! And IE isn't the only browser with problems, and the special cases don't generalise very simply. So I've put in a generic createElement('div') as a container element to extract the new node from, expanded the tagMap with the special cases that I've managed to fix so far, it's now a map of arrays, each of 3 elements: before-HTML, after-HTML and depth required to extract the created element. It then uses this data to wrap the creation text. This seems to be pretty much what jQuery does as well although I haven't had a detailed look at their special cases to see if I've missed anything.

So, for example, OPTION is now created inside a SELECT inside the parent DIV, while a LEGEND is created inside FIELDSET/FORM/DIV.

Here's the still failing elements in the browsers I've tested:

IE6: ABBR, CAPTION, COLGROUP, TFOOT, THEAD IE7: CAPTION, COLGROUP, TFOOT, THEAD IE8: none IE9: none

FF3: AREA - possibly doesn't need to be supported (BTW, FF3 doesn't complete the tests because of a null being passed to camelize() via getStyle() via css() for the "setting & getting styles" tests). FF3.6: AREA (haven't tested 4 or 5) FF6+: none

Safari 4+: none

Opera: 11.5: none

Chrome 14: none

Lots of other tests still failing in older FF & IE though, the "setting & getting styles" one seems to cause particular problems.

I also see that specialTags triggers calls down through html() -> append() -> normalize() -> create() and may need to be updated for this list or maybe replaced with a tagMap check? I haven't poked around with any of that Plus Qwery seems to have a near duplicate of create(), I haven't looked at what it's used for at all but perhaps that needs changing too if you accept these changes.

Cheers!

[ded]

excellent. i was just buying my time to not look into this. i'm glad someone did. i'll have a look at this a bit more deeply. thanks for adding tests as well.

[rvagg]

updated to latest master

[ded]

will this pass the case where someone puts in $.create(' <p>hello</p> ') (note the space). that was the main reason for the el.nodeType == 1 && els.push(el)

[rvagg]

crud, sorry, bad merge. fixed now and ignoring create('<area>'), not sure I've seen one in the wild for a while. Now passing FF 3.6+.

[rvagg]

Rolled in to 34, closing: https://github.com/ded/bonzo/pull/34