Geek Answers Handbook

JQuery gets invalid html () for range after p tag

<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/></script> <script> $(function() { alert($('#s1').html()); }); </script> </head> <body> <p/> <span id="s1"><h3>Eggs</h3>One dozen please</span> </body> </html>

This page puts an empty warning with the <p> tag but with <br> it shows' <h3> Eggs </ h3> One dozen, please, as I expected.

This is similar to Firefox 12.0 and Chrome 19.0. IE8 gets it right. Any ideas what could happen?

+4
source share
3 answers

/ doesn't make sense, at least not in HTML5. So you have:

 <p> <span id="s1"><h3>Eggs</h3>One dozen please</span>

Since a <p> cannot contain <h3> , the browser tries to make at least some sense out of it, interpreting it as:

 <p> <span id="s1"></span> </p> <h3>Eggs</h3>One dozen please
+8
source

@pimvdb is right about closing <p>

However, another thing to note is that you have <h3> , which is a block element inside a <span> , which is an invalid inline element. inline elements must not contain blocks. Blocks may contain blocks and / or inline strings.

For your example. if you change <span> to <div> , it will work.

+2
source

try the following:

<p></p>

 $(function() { alert($('#s1').html()); });

and will work. You need to close the <p></p>

Demo

+1
source

More articles:


All Articles