Why Does Jquery Interpret Broken Markup Differently Than The Browser?

I have previously answered this question, but I do not fully understand why the answer is correct. The gist of the answer:

$(function() { $(

Solution 1:

The offending line in jQuery source is here: https://github.com/jquery/jquery/blob/master/src/manipulation.js#L222

tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[ 2 ];

Where rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi and elem is the fragment of potentially broken markup.

The result of that replace call, for that input, is <a href=http://www.website.com></a>foo bar</a>.

The browser then does the work of fixing that markup, by removing the ultimate </a>.

So the other point in the question can be answered with: This particular case will also affect all tags except area, br, col, embed, hr, img, input, link, meta, and param.

tl;dr: https://stackoverflow.com/a/1732454/1253312