Manipulation: Avoid concatenating strings in buildFragment

Concatenating HTML strings in buildFragment is a possible security risk as it
creates an opportunity of escaping the concatenated wrapper. It also makes it
impossible to support secure HTML wrappers like
[trusted types](https://web.dev/trusted-types/). It's safer to create wrapper
elements using `document.createElement` & `appendChild`.

The previous way was needed in jQuery <4 because IE <10 doesn't accept table
parts set via `innerHTML`, even if the element which contents are set is
a proper table element, e.g.:
```js
tr.innerHTML = "<td></td>";
```
The whole structure needs to be passed in one HTML string. jQuery 4 drops
support for IE <11 so this is no longer an issue; in older version we'd have
to duplicate the code paths.

IE <10 needed to have `<option>` elements wrapped in
`<select multiple="multiple">` but we no longer need that on master which
makes the `document.createElement` way shorter as we don't have to call
`setAttribute`.

All these improvements, apart from making logic more secure, decrease the
gzipped size by 58 bytes.

Closes gh-4724
Ref gh-4409
Ref angular/angular.js#17028

Co-authored-by: Richard Gibson <richard.gibson@gmail.com>

1 files changed, 11 insertions, 0 deletions

diff --git a/test/unit/manipulation.js b/test/unit/manipulation.js
index 81a64c762..a4a46f924 100644
--- a/test/unit/manipulation.js
+++ b/test/unit/manipulation.js
@@ -2969,3 +2969,14 @@ QUnit.test( "Sanitized HTML doesn't get unsanitized", function( assert ) {
 		test( "<noembed><noembed/><img src=url404 onerror=xss(12)>" );
 	}
 } );
+
+QUnit.test( "Works with invalid attempts to close the table wrapper", function( assert ) {
+	assert.expect( 3 );
+
+	// This test case attempts to close the tags which wrap input
+	// based on matching done in wrapMap which should be ignored.
+	var elem = jQuery( "<td></td></tr></tbody></table><td></td>" );
+	assert.strictEqual( elem.length, 2, "Two elements created" );
+	assert.strictEqual( elem[ 0 ].nodeName.toLowerCase(), "td", "First element is td" );
+	assert.strictEqual( elem[ 1 ].nodeName.toLowerCase(), "td", "Second element is td" );
+} );