Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery gets wrong html() for span after a p tag

Tags:

jquery

<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 up a blank alert with the <p> tag, but with <br> it shows '<h3>Eggs</h3>One dozen please', as I'd expected.

This appears to be the case with Firefox 12.0 and Chrome 19.0. IE8 gets it right. Any ideas what might be happening?

like image 869
Steve Teale Avatar asked Dec 21 '22 20:12

Steve Teale


1 Answers

The / has no meaning, at least not in HTML5. So you actually have:

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

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

<p>
  <span id="s1"></span>
</p>
<h3>Eggs</h3>One dozen please
like image 198
pimvdb Avatar answered Jan 13 '23 13:01

pimvdb