Modern browsers routinely fix invalid html by rearranging elements in the DOM, but when you create the same html-structure with JavaScript, it remains intact. Why? This seems consistent across browsers. Is there a W3C recommendation how such cases should be handled? Under what circumstances can we expect browsers to intervene?

For examples, see the following JSFiddle: https://jsfiddle.net/od0uwxsb/

It includes span-Elements in place of td-Elements and table-Elements inside p-nodes. In both cases browsers fix the invalid html in the initial load, but keep it intact when the structure is created dynamically.