Creating DOM elements fails in IE when no closing tag

[adamlogic]

In IE, creating DOM elements fails if there is no closing tag. This only happens for certain elements, and it only happens if attributes or child elements are included.

Passes:

$('<form>').length == 1
$('<form id="foo" />').length == 1
$('<form id="foo"></form>').length == 1
$('<div id="foo">').length == 1  // works for some elements, not others

Fails:

$('<form id="foo">').length
$('<span id="foo">').length

I believe the problem is in the following lines of manipulation.js:

    var tag = (rtagName.exec( elem ) || ["", ""])[1].toLowerCase(),
      wrap = wrapMap[ tag ] || wrapMap._default,
      depth = wrap[0],
      div = context.createElement("div");

    // Go to html and back, then peel off extra wrappers
    div.innerHTML = wrap[1] + elem + wrap[2];

In the case of a form (or many other elements), here is what happens:

  div.innerHTML = 'div<div><form id="foo"></div>'

IE will tack the closing form tag after the closing div, like this:

  'div<div><form id="foo"></div></form>'

Then the following code will end up with the form instead of the containing div:

    while ( depth-- ) {
      div = div.lastChild;
    }

I'm not sure how to fix this, but I did write a failing spec. It's up on Github: ​http://github.com/adamlogic/jquery/commit/5bf852d6ea6d5151e0107406dd3f7b6964dcd245

[dmethvin]

Dup of #6815