Los navegadores modernos corrigen rutinariamente html inválido reorganizando elementos en el DOM, pero cuando creas la misma estructura html con JavaScript, permanece intacta. ¿Por qué? Esto parece consistente en todos los navegadores. ¿Existe alguna recomendación del W3C sobre cómo deben manejarse estos casos? ¿En qué circunstancias podemos esperar que intervengan los navegadores?

Para ver ejemplos, consulte el siguiente JSFiddle: https://jsfiddle.net/od0uwxsb/

Incluye span -Elementos en lugar de td -Elementos y table -Elementos dentro de p -nodos. En ambos casos, los navegadores corrigen el html no válido en la carga inicial, pero lo mantienen intacto cuando la estructura se crea dinámicamente.