JQuery html adding multiple copies of dom elements when using self closing tags

[shard2001]

I've raised this as a bug on stack overflow, so there's more detail there

https://stackoverflow.com/questions/61366853/jquery-3-5-0-producing-odd-output-using-html

but in summary, when there's a self closing tag, jQuery 3.4.1 would pretty much just deal with it, now it results in DOM elements being duplicated a few times

I think the jsbin example is fairly self explanatory

https://jsbin.com/baretotepo/edit?html,js,output

[mgol]

Thanks for reporting an issue. This change is expected, though as it was needed to fix a security issue.

Please read jQuery 3.5.0 release blog post & the 3.5 upgrade guide, they should have all necessary details.

[mgol]

This specific duplicating tag behavior is surprising but it's a result of two things:

1. jQuery 3.5.0+ doesn't try to fix content for you & the HTML parser treats <i /> as just <i> - only the opening tag.
2. As shown in https://html.spec.whatwg.org/multipage/parsing.html#misnested-tags:-b-i-/b-/i, <i> is a formatting element and the parsing algorithm mandates that if you close an outer tag without closing an inner formatting element, it gets closed & immediately re-opened after the outer tag closing tag.

This shows one of the reasons why <i> is not just a shorter version of <span> if you reset its default CSS, different semantics of this tag actually matter; I'd advise against using <i> elements for anything that's not just formatting-related.