one more empty P element?

Question

 alert(document.getElementById('hhh').children[2].outerHTML) 

 <h1 id = 'hhh'> hhh1 <p id ="ppp"><p>para1</p>para2</p> </h1> 

Why h1 have 3 children ?

It should be 2, which are 2 P elements.

Why there's 1 more extra empty P elements ?

Answer 1

Because of the nested P TAG.

<p id ="ppp"><p>para1</p>para2</p>

The above code will be rendered as:

<p id="ppp"></p>
<p>para1</p>
"para2"
<p></p>

• 1st p tag will automatically get a closing partner
• 2nd p tag and 3rd p closing tag will work properly as partner
• 4th p closing tag will generate an opening p tag to partner the leftover closing p tag. therefore creating the 3rd P TAG

I knew this by experience. I haven't dive deep why this is being rendered like this.

hope it's understandable and helped you.