[Résolu] "innerHTML =" sort des <p> de leur parent

innerHTML est sensé comprendre la mécanique des tags imbriqués, non ?
Alors pourquoi :

<p id="a"><p>b</p></p>

devient

<p id="a"></p><p>b</p><p></p>

dans :

myCode.innerHTML = '<p id="a"><p>b</p></p>';

Voici le codepen.
Et en voici un résumé :

<code></code>
<script>
document.querySelector('code').innerHTML = '<p id="a"><p>b</p></p>';
// result : <p id="a"></p><p>b</p><p></p>
</script>

Modifié par Gill (02 Dec 2019 - 12:18)

En effet ! C'est tout bête... Merci !

Bizarre... Autant je comprenais que certaines balises pouvaient être spécialisées ( <li>, par ex), autant j'étais persuadé que <p> n'était qu'une balise sémantique générique, comme <div><section><article><footer>, etc...

J'ai aussi été abusé par le fait que <p contentEditable="true"> insère lui-même des <p>, lorsqu'on tape [Entrée]...
...dans le cas particulier de mon programme (par défaut, dans un <p>, ce sont des <div>)
à cause de :

document.execCommand("defaultParagraphSeparator", false, 'p');

Modifié par Gill (02 Dec 2019 - 14:41)

La balise <p> est la plus @#!@# de toutes les balises. C'est une balise de type bloc mais elle ne peut pas elle-même contenir des balises de type bloc
voir https://forum.alsacreations.com/topic-2-18465-1-De-la-bonne-utilisation-de-la-balise-ltpgt.html