CODEWITHSUNDEEP
javascripthtmlweb
cary
cary

Reputation: 61

one more empty P element?

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 ?

Upvotes: 0

Views: 35

Answers (1)

Mark
Mark

Reputation: 35

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.

Upvotes: 1

Related Questions